/* ═══════════════════════════════════════════════════════════
FailRATR · MOBILE DESIGN SYSTEM
Apple-iOS-подобная адаптация поверх существующего сайта.
Подключается на ВСЕХ страницах, активируется при ≤768px.
Тёмная + медная палитра — наш фирменный стиль.
═══════════════════════════════════════════════════════════ */
/* m200-Z15: добавлено условие (pointer: coarse) — все touch-устройства, включая iPhone в landscape. */
/* m200-Z156: применяем мобильный CSS ВСЕГДА. Все правила завязаны на мобильные классы (.m-*, .mt-*),
их нет на десктоп-страницах сайта. На десктопе при открытом Задачнике (data-tasker-mobile)
контент центрируется колонкой 768px — правило в index.html. */
@media all {
:root {
/* ─── Цвета (СГИ-палитра: графит + медь) ─── */
--m-bg-1: #16161A; /* фон страницы — графит, не чёрный */
--m-bg-2: #1E1E23; /* карточки */
--m-bg-3: #26262C; /* поверхность 2 (input, чипы) */
--m-bg-4: #2F2F36; /* hover */
--m-text-1: rgba(255,253,247,0.96);
--m-text-2: rgba(235,230,220,0.70);
--m-text-3: rgba(235,230,220,0.46);
--m-sep: rgba(255,253,247,0.08);
--m-sep-2: rgba(255,253,247,0.16);
--m-acc: #D26A1A; /* медь */
--m-acc-2: #B2581A; /* медь тёмная (низ градиента) */
--m-acc-grad: linear-gradient(180deg, #D26A1A 0%, #B2581A 100%);
--m-acc-soft: rgba(210,106,26,0.16);
--m-acc-glow: rgba(210,106,26,0.40);
--m-ok: #6EA889;
--m-warn: #D2954A;
--m-bad: #E87575;
--m-info: #7FAECF;
/* ─── Типографика (iPhone) ─────────────── */
--m-h1: 22px;
--m-h2: 17px;
--m-h3: 15px;
--m-body: 14px;
--m-caption: 12px;
--m-kpi: 26px;
--m-kpi-l: 32px;
/* ─── Отступы (минимальные, контент во всю ширину) ─── */
--m-pad: 8px; /* safe inset от краёв */
--m-gap: 8px;
--m-pad-card: 14px;
--m-gap-row: 8px;
/* ─── Радиусы ──────────────────────────── */
--m-r-l: 14px;
--m-r-m: 10px;
--m-r-s: 8px;
--m-r-pill: 99px;
/* ─── Тени ─────────────────────────────── */
--m-sh-s: 0 1px 3px rgba(0,0,0,0.4);
--m-sh-m: 0 4px 12px rgba(0,0,0,0.5);
--m-sh-l: 0 12px 32px rgba(0,0,0,0.6);
}
/* ═══════════════════════════════════════════════════════════
m200-B5-Z9: 6 ТЕМ ОФОРМЛЕНИЯ
copper — дефолтная (без класса .theme-*) — графит-медь
light — светлая зелёная (.theme-light)
dark-ios — тёмная iOS (.theme-dark-ios) — чёрный + синий
purple — фиолетовая (.theme-purple) — светлая + фиолет
light-graphite — светлая графитовая (.theme-light-graphite)
dark-green — тёмная зелёная (.theme-dark-green)
═══════════════════════════════════════════════════════════ */
/* Тёмная iOS — чёрный фон, синий акцент */
html.theme-dark-ios {
--m-bg-1: #000000; --m-bg-2: #1C1C1E; --m-bg-3: #2C2C2E; --m-bg-4: #3A3A3C;
--m-text-1: #FFFFFF; --m-text-2: #B5B5BA; --m-text-3: #8E8E93;
--m-sep: rgba(255,255,255,0.10); --m-sep-2: rgba(255,255,255,0.18);
--m-acc: #0A84FF; --m-acc-2: #0066CC;
--m-acc-grad: linear-gradient(180deg, #0A84FF 0%, #0066CC 100%);
--m-acc-soft: rgba(10,132,255,0.16); --m-acc-glow: rgba(10,132,255,0.32);
}
html.theme-dark-ios, html.theme-dark-ios body {
background: #000000 !important; color: #FFFFFF !important;
}
/* Фиолетовая — светлая + фиолетовый акцент */
html.theme-purple {
--m-bg-1: #F5F5F7; --m-bg-2: #FFFFFF; --m-bg-3: #F0F1F4; --m-bg-4: #E5E7EB;
--m-text-1: #1D1D1F; --m-text-2: #5C5C60; --m-text-3: #98989D;
--m-sep: rgba(0,0,0,0.08); --m-sep-2: rgba(0,0,0,0.16);
--m-acc: #5E7CE2; --m-acc-2: #4863B8;
--m-acc-grad: linear-gradient(180deg, #6F8AE9 0%, #4863B8 100%);
--m-acc-soft: rgba(94,124,226,0.14); --m-acc-glow: rgba(94,124,226,0.28);
}
html.theme-purple, html.theme-purple body {
background: linear-gradient(180deg, #ECE9F5 0%, #F5F5F7 30%, #F5F5F7 100%) !important;
color: var(--m-text-1) !important;
}
/* Светлая графитовая — бежевый + медный */
html.theme-light-graphite {
--m-bg-1: #F6F4F0; --m-bg-2: #FFFFFF; --m-bg-3: #EFEAE0; --m-bg-4: #E5DECE;
--m-text-1: #2C2A26; --m-text-2: #5C5852; --m-text-3: #97928A;
--m-sep: rgba(44,42,38,0.10); --m-sep-2: rgba(44,42,38,0.18);
--m-acc: #E0A85C; --m-acc-2: #B0813F;
--m-acc-grad: linear-gradient(180deg, #E5B274 0%, #B0813F 100%);
--m-acc-soft: rgba(224,168,92,0.16); --m-acc-glow: rgba(224,168,92,0.32);
}
html.theme-light-graphite, html.theme-light-graphite body {
background: #F6F4F0 !important; color: var(--m-text-1) !important;
}
/* Тёмная зелёная — глубокий зелёный + светло-зелёный акцент */
html.theme-dark-green {
--m-bg-1: #0D1A14; --m-bg-2: #1A2A22; --m-bg-3: #243A30; --m-bg-4: #2F4A3D;
--m-text-1: #E8F0E5; --m-text-2: #ADC0B0; --m-text-3: #7F9580;
--m-sep: rgba(232,240,229,0.10); --m-sep-2: rgba(232,240,229,0.18);
--m-acc: #4FAE5B; --m-acc-2: #3A8848;
--m-acc-grad: linear-gradient(180deg, #5BC066 0%, #3A8848 100%);
--m-acc-soft: rgba(79,174,91,0.16); --m-acc-glow: rgba(79,174,91,0.32);
}
html.theme-dark-green, html.theme-dark-green body {
background: #0D1A14 !important; color: var(--m-text-1) !important;
}
/* Сетка выбора темы (превью карточек как в Ответ.хранения) */
.mt-theme-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 0 12px;
}
.mt-theme-card {
background: var(--m-bg-2);
border: 2px solid var(--m-sep);
border-radius: 12px;
padding: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s, transform 0.1s;
}
.mt-theme-card:active { transform: scale(0.97); }
.mt-theme-card.active { border-color: var(--m-acc); box-shadow: 0 0 0 2px var(--m-acc-soft); }
.mt-theme-prev {
border-radius: 8px;
padding: 10px;
margin-bottom: 8px;
min-height: 90px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-theme-prev-card {
border-radius: 6px;
padding: 8px 10px;
flex: 1;
}
.mt-theme-prev-bar {
height: 6px;
border-radius: 3px;
background: rgba(0,0,0,0.08);
overflow: hidden;
}
.mt-theme-name {
font-size: 13px;
font-weight: 700;
color: var(--m-text-1);
}
.mt-theme-sub {
font-size: 11px;
color: var(--m-text-3);
margin-top: 1px;
}
.mt-theme-check {
font-size: 11px;
font-weight: 700;
color: var(--m-acc);
margin-top: 4px;
}
/* ═══════════════════════════════════════════════════════════
m200-ui: ТЕМА «СВЕТЛАЯ» — светлая, зелёная, мягкая.
Активируется добавлением класса .theme-light на .
Переключается из шапки Задачника, сохраняется в localStorage.
═══════════════════════════════════════════════════════════ */
html.theme-light {
/* Светлый фон с лёгким зелёным верхом, белые карточки */
--m-bg-1: #F4F8F5;
--m-bg-2: #FFFFFF;
--m-bg-3: #F0F3F6;
--m-bg-4: #E5EAEF;
--m-text-1: #101820;
--m-text-2: #5A6168;
--m-text-3: #9097A1;
--m-sep: rgba(16,24,32,0.08);
--m-sep-2: rgba(16,24,32,0.16);
/* Зелёный вместо меди */
--m-acc: #21A038;
--m-acc-2: #1B8A2F;
--m-acc-grad: linear-gradient(180deg, #2BB343 0%, #1B8A2F 100%);
--m-acc-soft: rgba(33,160,56,0.12);
--m-acc-glow: rgba(33,160,56,0.25);
--m-ok: #21A038;
--m-warn: #E58A1A;
--m-bad: #E14B5B;
--m-info: #1E88E5;
/* Крупные радиусы */
--m-r-l: 18px;
--m-r-m: 14px;
--m-r-s: 10px;
--m-r-pill: 99px;
/* Мягкие тени вместо контурных рамок */
--m-sh-s: 0 1px 3px rgba(16,24,32,0.06);
--m-sh-m: 0 4px 12px rgba(16,24,32,0.08);
--m-sh-l: 0 8px 24px rgba(16,24,32,0.12);
}
/* Светлый зелёно-белый градиент на странице целиком */
html.theme-light, html.theme-light body {
background: linear-gradient(180deg, #E5F2EA 0%, #F5FBF6 30%, #F4F8F5 100%) !important;
color: var(--m-text-1) !important;
}
/* В светлой теме скрываем медные полоски сверху карточек —
там их нет, у них чистые белые блоки с мягкой тенью */
html.theme-light .m-card-acc::before,
html.theme-light .m-btn-projects::before,
html.theme-light .mt-proj-item::before,
html.theme-light .mt-stub-head::before,
html.theme-light .mt-stub-grid > div::before,
html.theme-light .mt-stub-stream::before,
html.theme-light .mt-stub-member::before,
html.theme-light .mt-proj-stream-card::before,
html.theme-light .mt-proj-stream-col::before,
html.theme-light .mt-proj-an-card::before,
html.theme-light .mt-proj-timeline::before {
display: none !important;
}
/* Карточки в светлой теме: белый фон, видимая серая рамка + лёгкая тень.
m200-B5-N/Пункт 3: Раиль попросил чёткие границы у каждого блока, чтобы они не сливались с белым. */
html.theme-light .m-card,
html.theme-light .m-card-acc,
html.theme-light .m-btn-projects,
html.theme-light .mt-proj-item,
html.theme-light .mt-stub-head,
html.theme-light .mt-stub-grid > div,
html.theme-light .mt-stub-stream,
html.theme-light .mt-stub-member,
html.theme-light .mt-proj-stream-card,
html.theme-light .mt-proj-stream-col,
html.theme-light .mt-proj-an-card,
html.theme-light .mt-proj-timeline,
html.theme-light .m-day-block,
html.theme-light .section,
html.theme-light .mt-task-who,
html.theme-light .mt-shift-due-btn,
html.theme-light .mt-stub-todo,
html.theme-light .mt-add-subtask {
background: var(--m-bg-2) !important;
border: 1px solid #d8dee3 !important;
box-shadow: var(--m-sh-s) !important;
}
/* Информационные блоки задачи (карточки на белом без класса .m-card) — той же серой рамкой.
Селектор — у блоков с inline border-radius внутри карточки задачи. */
html.theme-light .mt-task-info-grid > div,
html.theme-light .mt-task-delegate-info {
background: var(--m-bg-2) !important;
border: 1px solid #d8dee3 !important;
border-radius: 12px !important;
padding: 12px !important;
}
/* Синяя плашка «Проекты» в светлой теме — мягче и темнее */
html.theme-light .m-btn-projects {
background: linear-gradient(180deg, #2D7BC4 0%, #1E5DA4 100%) !important;
box-shadow: 0 4px 14px rgba(45,123,196,0.25) !important;
color: #fff !important;
}
/* Иконки в карточках — на светлом фоне зелёный глиф вместо медного */
html.theme-light .mt-proj-ic,
html.theme-light .mt-stub-ic,
html.theme-light .mt-stub-av,
html.theme-light .mt-stub-stream-ic,
html.theme-light .mt-proj-stream-ic,
html.theme-light .mt-proj-stream-col-ic,
html.theme-light .mt-proj-av-pic,
html.theme-light .m-btn-projects-ic {
background: var(--m-bg-3) !important;
border-color: var(--m-acc-soft) !important;
color: var(--m-acc) !important;
}
/* Активная пилюля табов */
html.theme-light .mt-proj-tab.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* Текст внутри плашек «Проекты» (белая иконка остаётся медной/белой) */
html.theme-light .m-btn-projects-ic {
background: rgba(255,255,255,0.20) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.30) !important;
}
html.theme-light .m-btn-projects-t { color: #fff !important; }
html.theme-light .m-btn-projects-sub { color: rgba(255,255,255,0.85) !important; }
html.theme-light .m-btn-projects-arr { color: rgba(255,255,255,0.85) !important; }
/* ─── Базовое тело ─────────────────────── */
html, body {
background: var(--m-bg-1) !important;
color: var(--m-text-1) !important;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: var(--m-body);
line-height: 1.4;
}
/* m200-Z155: на десктопе (>768px) центрируем контент колонкой 768px.
Раиль 27.05: «учим всех работать в одной версии, не переходя между десктопной и мобильной».
Мобильный UI применяется ВСЕГДА (см. @media all сверху), но широкий экран ограничен по ширине.
Ограничиваем body — этого достаточно: sticky-шапка и sheet'ы лягут внутри 768-колонки сами. */
@media (min-width: 769px) {
html {
background: #0a0a0c !important;
}
body[data-tasker-mobile] {
max-width: 768px !important;
margin: 0 auto !important;
box-shadow: 0 0 24px rgba(0,0,0,0.4);
min-height: 100vh;
position: relative;
}
}
/* iOS: 16px минимум чтобы не зумило */
input, select, textarea {
font-size: 16px !important;
-webkit-appearance: none;
appearance: none;
}
/* ─── Контейнер контента ───────────────── */
/* Сверху оставляем 56px чтобы fixed-бургер (top:8 left:8, 40×40) не перекрывал */
.main {
background: var(--m-bg-1);
padding: 56px 0 88px !important;
}
/* В Задачнике у нас своя m-topbar — её padding-left:60 уже учитывает бургер,
но сверху main всё равно нужен — иначе при скролле бургер закроет контент */
body[data-tasker-mobile] .main { padding-top: 0 !important; }
/* m200-Z292 (01.06.2026): правый отступ с учётом безопасной зоны телефона,
чтобы бейдж уведомлений на колокольчике не обрезался краем экрана. */
body[data-tasker-mobile] .m-topbar { padding-left: 60px !important; padding-right: calc(14px + env(safe-area-inset-right, 0px)) !important; }
/* ─── Шапка страницы (sticky-top) ──────── */
/* Бургер размещаем ВНУТРИ шапки слева — иначе при скролле fixed-бургер перекрывает контент. */
/* m200-Z251 (30.05.2026):
- Раньше sticky внутри .main не работал на десктопе — родитель скроллился сам.
- Теперь FIXED — шапка привязана к viewport напрямую.
- Чтобы шапка не наезжала на сайдбар: на десктопе её ограничиваем шириной .main (768px по центру).
- Контент должен иметь padding-top = высоте шапки (см. ниже). */
.m-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
min-height: 56px;
height: calc(56px + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
background: var(--m-bg-1);
border-bottom: 1px solid var(--m-sep);
display: flex;
align-items: center;
/* m200-Z292 (01.06.2026): учитываем боковые «безопасные зоны» телефона
(скруглённые углы iPhone Air). Без env(safe-area-inset-right) крайняя
иконка-колокольчик прижата к самому краю экрана и бейдж «2» обрезается. */
padding-left: calc(12px + env(safe-area-inset-left, 0px));
padding-right: calc(14px + env(safe-area-inset-right, 0px));
padding-bottom: 0;
gap: 8px;
overflow: hidden;
box-sizing: border-box;
}
/* m200-Z251.2: padding-top для #mt-content задан НИЖЕ — учитывает и шапку, и фиксированные вкладки. */
/* m200-Z251: на десктопе (≥769px) шапка центрируется и ограничивается шириной 768px */
@media (min-width: 769px) {
body[data-tasker-mobile] .m-topbar {
width: 768px !important;
left: 50% !important;
transform: translateX(-50%);
right: auto !important;
}
}
/* Бургер-кнопка внутри шапки (вместо фиксированного external) */
.m-topbar-burger {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--m-bg-3);
color: var(--m-text-1);
border: 1px solid var(--m-sep-2);
display: grid; place-items: center;
font-size: 18px;
line-height: 1;
cursor: pointer;
flex: none;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
font-family: inherit;
padding: 0;
}
.m-topbar-burger:active {
transform: scale(0.92);
background: rgba(210,106,26,0.20);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft), 0 4px 14px var(--m-acc-glow);
}
/* В Задачнике скрываем внутренний бургер шапки — используется глобальный (mobile-burger). */
body[data-tasker-mobile] .m-topbar-burger { display: none !important; }
/* Медная полоса внизу шапки (как в Эксплуатации СГИ) */
.m-topbar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.75;
}
.m-topbar-action {
width: 44px; height: 44px;
border-radius: var(--m-r-s);
background: transparent;
color: var(--m-text-1);
border: none;
display: grid; place-items: center;
font-size: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease, transform .15s ease, box-shadow .2s ease;
flex: none;
}
.m-topbar-action:active {
background: var(--m-acc-soft);
transform: scale(0.92);
box-shadow: 0 0 0 2px var(--m-acc-soft);
}
.m-topbar-title {
flex: 1;
font-size: var(--m-h2);
font-weight: 700;
text-align: center;
/* m200-Z97: шапка всегда тёмная (rgba(22,22,26,0.92)) независимо от темы,
значит текст в ней всегда должен быть белым. Иначе в светлой теме --m-text-1 = #101820
и заголовок «Задачник» сливается с тёмным фоном шапки. */
color: #ffffff;
letter-spacing: -0.01em;
line-height: 1.15;
}
.m-topbar-beta {
display: block;
font-size: 10.5px;
font-weight: 700;
color: var(--m-acc);
letter-spacing: 0.4px;
text-transform: uppercase;
opacity: 0.85;
}
/* m97: блок «Инициатор / Исполнитель» сразу под заголовком карточки задачи */
.mt-task-who {
display: flex;
flex-direction: column;
gap: 1px;
padding: 9px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 9px;
margin-bottom: 8px;
}
.mt-task-who-row {
font-size: 13px;
color: var(--m-text-1);
line-height: 1.3;
margin: 0;
padding: 0;
}
/* m130v-fix: соисполнители — компактнее, чтобы не было пустот между ними */
.mt-task-who-row-co {
font-size: 12px;
line-height: 1.2;
margin: 0;
padding: 0;
}
.mt-task-who-row-co b { font-size: 12.5px; }
.mt-task-who-row-co .mt-ack-mini { font-size: 10px; padding: 1px 5px; }
.mt-task-who-l {
color: var(--m-text-3);
font-weight: 600;
margin-right: 4px;
}
.mt-task-who-row b {
font-weight: 800;
color: var(--m-text-1);
}
.m-topbar-action.has-badge {
position: relative;
}
/* m200-Z76: стиль бейджей задаётся прямо в JS (updateMsgBadge и updateNotifBadge).
CSS-правило удалено чтобы не было двух источников правды. */
.m-topbar-action.has-badge {
position: relative;
}
/* ─── Большой заголовок страницы ───────── */
.m-page-title {
font-size: 24px;
font-weight: 800;
color: var(--m-text-1);
padding: 12px var(--m-pad) 4px;
letter-spacing: -0.02em;
line-height: 1.18;
}
.m-page-sub {
font-size: var(--m-caption);
color: var(--m-text-3);
padding: 0 var(--m-pad) 12px;
}
/* ─── Кнопка-действие на всю ширину ────── */
.m-btn-primary {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 2 * var(--m-pad));
height: 44px;
margin: 0 var(--m-pad) var(--m-gap);
background: var(--m-acc-grad);
border: none; border-radius: var(--m-r-m);
color: #fff;
font-size: var(--m-body);
font-weight: 700;
box-shadow: 0 2px 10px var(--m-acc-glow), inset 0 1px 0 rgba(255,255,255,0.15);
-webkit-tap-highlight-color: transparent;
cursor: pointer;
transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.m-btn-primary:active {
transform: scale(0.98);
filter: brightness(1.05);
box-shadow: 0 0 0 3px var(--m-acc-soft), 0 4px 18px var(--m-acc-glow);
}
/* m122o-P8/P9: disabled-состояние primary-кнопки — пока не заполнено обязательное поле */
.m-btn-primary[disabled],
.m-btn-primary.is-disabled {
background: var(--m-bg-3);
color: var(--m-text-3);
box-shadow: none;
cursor: not-allowed;
opacity: 0.7;
pointer-events: none;
}
.m-btn-secondary {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 2 * var(--m-pad));
height: 44px;
margin: 0 var(--m-pad) var(--m-gap);
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: var(--m-r-m);
color: var(--m-text-1);
font-size: var(--m-body);
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.m-btn-secondary:active {
transform: scale(0.98);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft);
}
/* ─── Горизонтальный ряд пилюль (табы) ─── */
.m-pills {
display: flex;
gap: 6px;
padding: 0 var(--m-pad) var(--m-gap);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.m-pills::-webkit-scrollbar { display: none; }
/* Вкладки Задачника (Обзор/Все/Люди/Сводка) — равной ширины, как кнопка ниже */
/* m200-Z251.2 (30.05.2026): тоже FIXED как и шапка, прямо под ней.
Раньше sticky не работал т.к. #mt-content смещён через padding-top, sticky-родитель
ушёл в невидимую зону за фиксированную шапку.
top = 56px (высота шапки) + safe-area; высота вкладок ~58px (включая padding).
На десктопе — центрируется и ограничена 768px. */
#mt-tabs.m-pills {
position: fixed;
top: calc(56px + env(safe-area-inset-top, 0px));
left: 0;
right: 0;
z-index: 95;
background: var(--m-bg-1);
padding-top: 8px;
padding-bottom: 12px;
padding-left: var(--m-pad, 12px);
padding-right: var(--m-pad, 12px);
margin-top: 0;
display: grid;
grid-template-columns: repeat(var(--mt-tabs-cols, 4), 1fr);
overflow: visible;
gap: 6px;
box-sizing: border-box;
border-bottom: 1px solid var(--m-sep);
}
@media (min-width: 769px) {
body[data-tasker-mobile] #mt-tabs.m-pills {
width: 768px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%);
}
}
/* m200-Z251.2: контент сдвигается вниз на ВЫСОТУ ШАПКИ + ВЫСОТУ ВКЛАДОК.
Высота вкладок ≈ 34 (пилюли) + 8 (top padding) + 12 (bottom) + 1 (border) = 55px. */
body[data-tasker-mobile] #mt-content {
padding-top: calc(56px + 55px + env(safe-area-inset-top, 0px)) !important;
}
#mt-tabs.m-pills .m-pill {
flex: 1;
padding: 0 4px;
min-width: 0;
justify-content: center;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
.m-pill {
flex: 0 0 auto;
height: 34px;
padding: 0 16px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-pill);
color: var(--m-text-2);
font-size: 13px;
font-weight: 600;
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer;
white-space: nowrap;
transition: transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .25s ease;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/* Touch feedback — нажимается визуально */
.m-pill:active {
transform: scale(0.96);
box-shadow: 0 0 0 2px var(--m-acc-soft);
}
/* Активная — медное свечение с двумя слоями (как в СГИ) */
.m-pill.active {
background: var(--m-acc-grad);
color: #fff;
border-color: var(--m-acc);
box-shadow:
0 0 0 2px var(--m-acc-soft),
0 4px 14px var(--m-acc-glow),
inset 0 1px 0 rgba(255,255,255,0.15);
transform: translateY(0);
}
.m-pill .badge {
background: rgba(255,255,255,0.25);
color: #fff;
padding: 0 6px;
border-radius: 99px;
font-size: 11px;
font-weight: 800;
min-width: 18px;
text-align: center;
}
/* ─── KPI 2×2 — уменьшенные копии десктопа ─── */
.m-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 0 var(--m-pad) var(--m-gap);
}
/* 6 плашек — компактная высота, цифра слева крупная, подпись справа */
.m-kpis-6 .m-kpi { min-height: 78px; padding: 10px 12px; }
/* Цветная плашка как на десктопе — полная заливка цветом, компактная */
.m-kpi {
border-radius: 12px;
padding: 10px 10px 11px;
min-height: 72px;
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, box-shadow .2s ease;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.m-kpi:active {
transform: scale(0.98);
box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.m-kpi.red { background: linear-gradient(180deg, #E14B5B 0%, #C53D4D 100%); }
.m-kpi.orange { background: linear-gradient(180deg, #F0A23A 0%, #D6892A 100%); }
.m-kpi.orange-soft { background: linear-gradient(180deg, #B97A28 0%, #8E5D1F 100%); }
.m-kpi.green { background: linear-gradient(180deg, #4DAE7F 0%, #3E926A 100%); }
.m-kpi.blue { background: linear-gradient(180deg, #4D9DD9 0%, #3D80B5 100%); }
.m-kpi.blue-soft { background: linear-gradient(180deg, #3A7AA8 0%, #2C5E80 100%); }
.m-kpi.teal { background: linear-gradient(180deg, #2FA8A0 0%, #1F8480 100%); }
/* m95: возвращён исходный фиолетовый для плашки «Исходящие задачи» по запросу Раиля.
Это исключение из правила «фиолетовый запрещён» — конкретно эта плашка ИЗНАЧАЛЬНО была фиолетовой. */
.m-kpi.purple { background: linear-gradient(180deg, #8C6BD8 0%, #6E51B6 100%); }
.m-kpi.copper { background: linear-gradient(180deg, #C68A4C 0%, #9A6A38 100%); }
/* Плашка KPI: большая цифра слева, подпись справа. Вся плашка кликабельна. */
.m-kpi {
flex-direction: row;
align-items: center;
gap: 10px;
}
/* m200-Z306: бейдж «новое» в стиле Telegram — чистый красный, тонкий шрифт,
в правом верхнем углу плашки (внутри границ). Число = непросмотренные задачи. */
.m-kpi-new {
position: absolute;
top: 7px; right: 7px;
min-width: 24px; height: 24px;
padding: 0 7px;
border-radius: 99px;
background: #FF3B30;
color: #fff;
font-size: 14px;
font-weight: 400;
font-feature-settings: 'tnum';
display: flex; align-items: center; justify-content: center;
box-sizing: border-box;
z-index: 2;
}
.m-kpi-value {
font-size: 36px;
font-weight: 800;
color: #fff;
line-height: 1;
font-feature-settings: 'tnum';
flex: none;
min-width: 28px;
text-align: center;
}
.m-kpi-label {
font-size: 12.5px;
font-weight: 700;
color: rgba(255,255,255,0.96);
line-height: 1.25;
flex: 1;
min-width: 0;
/* m130k-fix: текст должен помещаться полностью — Раиль хочет «или корректировки» целиком.
Убираем line-clamp, разрешаем перенос по словам, плашка растягивается по высоте. */
overflow: visible;
display: block;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
}
/* Совместимость со старыми блоками (если где-то ещё используется) */
.m-kpi-head, .m-kpi-num { display: contents; }
.m-kpi-openall {
background: rgba(255,255,255,0.22);
color: #fff;
border: none;
padding: 3px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
flex: none;
line-height: 1.1;
}
.m-kpi-openall:active { background: rgba(255,255,255,0.35); }
/* Список задач внутри плашки — белые «кармашки» */
.m-kpi-items {
display: flex; flex-direction: column; gap: 5px;
flex: 1;
}
.m-kpi-item {
background: rgba(255,255,255,0.18);
border-radius: 6px;
padding: 5px 7px;
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease;
}
.m-kpi-item:active { background: rgba(255,255,255,0.30); }
.m-kpi-item-t {
font-size: 10.5px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.m-kpi-item-s {
font-size: 9px;
color: rgba(255,255,255,0.78);
margin-top: 1px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.m-kpi-empty {
background: rgba(255,255,255,0.15);
border-radius: 6px;
padding: 8px;
text-align: center;
color: #fff;
font-size: 10px;
font-weight: 600;
}
/* ─── Список задач (строки) ───────────── */
.m-list {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
margin: 0 var(--m-pad) var(--m-gap);
overflow: hidden;
position: relative;
}
.m-list::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.75;
z-index: 1;
}
.m-list-h {
padding: 12px var(--m-pad) 6px;
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.m-list-h::after {
content: '';
flex: 1;
height: 1px;
background: var(--m-acc-grad);
opacity: 0.30;
}
.m-row {
display: flex; align-items: center; gap: 10px;
padding: 10px var(--m-pad-card);
min-height: 64px;
border-top: 1px solid var(--m-sep);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
transition: background .15s ease, box-shadow .2s ease;
}
.m-list .m-row:first-child { border-top: none; }
.m-row:active {
background: var(--m-bg-3);
box-shadow: inset 0 0 0 1px var(--m-acc-soft);
}
.m-row-stripe {
width: 3px; height: 32px;
border-radius: 99px;
background: var(--m-acc);
flex: none;
}
.m-row-stripe.red { background: var(--m-bad); }
.m-row-stripe.orange { background: var(--m-warn); }
.m-row-stripe.green { background: var(--m-ok); }
.m-row-stripe.blue { background: var(--m-info); }
/* m200-Z315: новые цвета статусов — жёлтый (согласование), бирюза (ждёт приёмки), серый (отменена) */
.m-row-stripe.yellow { background: #E8C84A; }
.m-row-stripe.teal { background: #2FA8A0; }
.m-row-stripe.gray { background: #8A8A8E; }
/* m200-Z305 (01.06.2026): единый вид карточек задач — каждая обведена по статусу
(согласованный с Раилем макет). Превращаем строку списка в отдельную плашку:
полная рамка 1.5px по цвету статуса, скругление, фон, отступ между карточками.
Вся инфо внутри (инициатор/исполнитель/делегат/срок/категория/статус) сохранена. */
.m-row.m-row-card {
border-top: none;
border: 1.5px solid var(--m-acc);
border-radius: 10px;
background: var(--m-bg-2);
margin-bottom: 10px;
align-items: flex-start;
}
.m-list .m-row.m-row-card:first-child { border-top: none; }
.m-row.m-row-card.red { border-color: var(--m-bad); }
.m-row.m-row-card.orange { border-color: var(--m-warn); }
.m-row.m-row-card.green { border-color: var(--m-ok); }
.m-row.m-row-card.blue { border-color: var(--m-info); }
/* m200-Z315: новые цвета рамки карточки — жёлтый/бирюза/серый */
.m-row.m-row-card.yellow { border-color: #E8C84A; }
.m-row.m-row-card.teal { border-color: #2FA8A0; }
.m-row.m-row-card.gray { border-color: #8A8A8E; }
/* «Не принято» — оставляем красноватую подсветку слева, но не перебиваем рамку статуса */
.m-row.m-row-card.m-row-not-accepted-wrap { border-left-width: 3px; }
.m-row-ico {
width: 40px; height: 40px;
border-radius: var(--m-r-s);
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 18px;
flex: none;
}
.m-row-body {
flex: 1;
min-width: 0; /* для text-overflow */
}
.m-row-title {
font-size: 14px;
font-weight: 600;
color: var(--m-text-1);
/* m200-Z147: заголовок задачи в 2 строки с многоточием в конце, иначе длинные тексты
вроде «Туалет Раиль подготовьте мини отчёт...» обрезались на полуслове и не было понятно
о чём задача. Раиль 27.05: «пусть всегда будет 2 строчки наименования». */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
line-height: 1.35;
word-break: break-word;
}
.m-row-sub {
font-size: 12px;
color: var(--m-text-3);
margin-top: 3px;
/* m100: перенос длинных подписей, чтобы инициатор/исполнитель и пилюли не резались */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.4;
}
.m-row-sub-2 {
margin-top: 4px;
}
.m-row-cre {
color: var(--m-text-2);
font-weight: 600;
}
.m-row-asg {
color: var(--m-text-1);
font-weight: 700;
}
.m-row-cat {
color: var(--m-text-2);
}
/* m101: метки «Инициатор:/Исполнитель:» серые, имя жирное */
.m-row-lbl {
color: var(--m-text-3);
font-weight: 600;
}
.m-row-line-cre b {
color: var(--m-text-2);
font-weight: 700;
}
.m-row-line-asg b {
color: var(--m-text-1);
font-weight: 800;
}
/* m102: строка статуса в карточке задачи */
.m-row-line-status b {
color: var(--m-acc);
font-weight: 800;
}
/* m92: пилюля «Не принято в работу» — горит чтобы исполнитель и постановщик не пропустили */
.m-row-not-accepted {
display: inline-block;
padding: 2px 8px;
border-radius: 99px;
font-size: 11px;
font-weight: 800;
margin-left: 2px;
}
.m-row-not-accepted.warn {
background: rgba(210,149,74,0.20);
color: var(--m-warn);
border: 1px solid rgba(210,149,74,0.55);
}
.m-row-not-accepted.bad {
background: rgba(232,117,117,0.20);
color: var(--m-bad);
border: 1px solid rgba(232,117,117,0.55);
animation: m-row-na-pulse 2s ease-in-out infinite;
}
@keyframes m-row-na-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(232,117,117,0.4); }
50% { box-shadow: 0 0 0 4px rgba(232,117,117,0); }
}
/* Сама карточка задачи при «не принято» — тонкая левая обводка */
.m-row.m-row-not-accepted-wrap {
border-left: 2px solid rgba(232,117,117,0.5);
}
/* m93: вкладки в блоке Идеи (Список / По категориям) */
.mt-ideas-tabs-inner {
display: flex;
gap: 6px;
padding: 4px 0 8px;
}
.mt-ideas-tab {
flex: 1;
padding: 8px 10px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep-2);
border-radius: 9px;
font-size: 12.5px;
font-weight: 800;
color: var(--m-text-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-ideas-tab:active { transform: scale(0.98); }
.mt-ideas-tab.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
.mt-ideas-cat {
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
margin-bottom: 7px;
overflow: hidden;
}
.mt-ideas-cat-h {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 11px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background: var(--m-bg-2);
border-bottom: 1px solid transparent;
}
.mt-ideas-cat-h.open {
border-bottom-color: var(--m-sep-2);
background: rgba(224,168,92,0.06);
}
.mt-ideas-cat-h:active {
background: var(--m-bg-3);
}
.mt-ideas-cat-ico { font-size: 16px; flex: none; }
.mt-ideas-cat-t {
flex: 1;
font-size: 13px;
font-weight: 800;
color: var(--m-text-1);
}
.mt-ideas-cat-cnt {
font-size: 11px;
font-weight: 800;
padding: 2px 8px;
border-radius: 99px;
background: var(--m-acc-soft);
color: var(--m-acc);
}
.mt-ideas-cat-arr {
color: var(--m-text-3);
font-size: 13px;
font-weight: 800;
width: 13px;
text-align: center;
}
.mt-ideas-cat-list {
padding: 4px 11px 7px;
background: var(--m-bg-1);
}
.m-row-arrow {
color: var(--m-text-3);
font-size: 18px;
flex: none;
}
.m-row-badge {
padding: 2px 8px;
border-radius: var(--m-r-pill);
font-size: 11px;
font-weight: 700;
flex: none;
}
.m-row-badge.red { background: rgba(232,117,117,0.16); color: #e87575; }
.m-row-badge.orange { background: rgba(210,149,74,0.16); color: #d2954a; }
.m-row-badge.green { background: rgba(110,168,137,0.16); color: #6ea889; }
/* ─── Блок «Что сдают» (сворачиваемый) ─── */
.m-day-block {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
margin: 0 var(--m-pad) var(--m-gap);
padding: 8px var(--m-pad-card) 8px;
position: relative;
overflow: hidden;
}
.m-day-block::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.m-day-h {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
padding: 4px 0;
}
.m-day-block.collapsed .m-day-body { display: none; }
.m-day-block.collapsed .m-day-chev { transform: rotate(-90deg); }
.m-day-chev { transition: transform .2s ease; }
.m-day-block .m-pills {
margin: 8px 0 6px !important;
padding: 0 !important;
}
.m-day-block .m-list {
margin: 0 !important;
margin-top: 4px !important;
}
.m-day-block .m-list::before { display: none; }
/* ─── Сводка: KPI-плашки + карточки графиков ─── */
.m-summary-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 0 var(--m-pad) var(--m-gap);
}
.m-sum-kpi {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
padding: 10px 12px 8px;
position: relative;
overflow: hidden;
min-height: 58px;
display: flex; flex-direction: column; justify-content: center;
}
.m-sum-kpi::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.85;
}
.m-sum-kpi.red::before { background: linear-gradient(180deg,#E87575 0%,#B85959 100%); }
.m-sum-kpi.orange::before { background: linear-gradient(180deg,#D2954A 0%,#A87439 100%); }
.m-sum-kpi.green::before { background: linear-gradient(180deg,#6EA889 0%,#558670 100%); }
.m-sum-kpi.blue::before { background: linear-gradient(180deg,#7FAECF 0%,#5F89A5 100%); }
.m-sum-v {
font-size: 22px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1.1;
letter-spacing: -0.02em;
}
.m-sum-kpi.red .m-sum-v { color: #E87575; }
.m-sum-kpi.orange .m-sum-v { color: #D2954A; }
.m-sum-kpi.green .m-sum-v { color: #6EA889; }
.m-sum-kpi.blue .m-sum-v { color: #7FAECF; }
.m-sum-l {
font-size: 11px;
color: var(--m-text-2);
margin-top: 2px;
line-height: 1.2;
}
.m-sum-card {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
margin: 0 var(--m-pad) var(--m-gap);
padding: 12px var(--m-pad-card);
position: relative;
overflow: hidden;
}
.m-sum-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.85;
}
.m-sum-h {
font-size: 13px;
font-weight: 800;
color: var(--m-text-1);
margin-bottom: 10px;
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 6px;
}
.m-sum-h-r {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--m-acc);
}
/* Прогресс-бар дисциплины */
.m-sum-bar {
height: 8px;
background: var(--m-bg-3);
border-radius: 99px;
overflow: hidden;
margin-top: 4px;
}
.m-sum-bar-fill {
height: 100%;
background: var(--m-acc-grad);
border-radius: 99px;
transition: width .4s ease;
}
.m-sum-bar-fill.green { background: linear-gradient(180deg,#6EA889 0%,#558670 100%); }
.m-sum-bar-fill.amber { background: linear-gradient(180deg,#D2954A 0%,#A87439 100%); }
.m-sum-bar-fill.red { background: linear-gradient(180deg,#E87575 0%,#B85959 100%); }
/* SVG-график тренда 14 дней */
.m-sum-chart { width: 100%; height: 80px; display: block; }
.m-sum-chart rect { transition: opacity .2s ease; }
.m-sum-chart .lbl { font-size: 9px; fill: var(--m-text-3); }
/* Категории — горизонтальный стек */
.m-sum-stack {
display: flex;
height: 12px;
border-radius: 99px;
overflow: hidden;
background: var(--m-bg-3);
margin-bottom: 8px;
}
.m-sum-stack > div { height: 100%; }
.m-sum-leg {
display: flex; flex-wrap: wrap; gap: 4px 10px;
font-size: 11px; color: var(--m-text-2);
}
.m-sum-leg-i { display: flex; align-items: center; gap: 4px; }
.m-sum-leg-d {
width: 8px; height: 8px; border-radius: 2px;
}
/* Список сотрудников с нагрузкой */
.m-sum-people {
display: flex; flex-direction: column; gap: 8px;
}
.m-sum-p {
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 8px;
padding: 6px 0;
border-bottom: 1px solid var(--m-sep);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-sum-p:last-child { border-bottom: none; }
.m-sum-p:active { background: var(--m-bg-3); }
.m-sum-p-n {
font-size: 13px;
font-weight: 600;
color: var(--m-text-1);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-sum-p-v {
font-size: 12px;
font-weight: 700;
color: var(--m-text-2);
text-align: right;
white-space: nowrap;
}
.m-sum-p-bar {
grid-column: 1 / -1;
height: 4px;
background: var(--m-bg-3);
border-radius: 99px;
overflow: hidden;
}
.m-sum-p-bar-f {
height: 100%;
border-radius: 99px;
transition: width .4s ease;
}
.m-sum-p-bar-f.red { background: linear-gradient(90deg,#E87575,#B85959); }
.m-sum-p-bar-f.amber { background: linear-gradient(90deg,#D2954A,#A87439); }
.m-sum-p-bar-f.green { background: linear-gradient(90deg,#6EA889,#558670); }
/* Топ-5 горячих задач */
.m-sum-hot {
display: flex; flex-direction: column; gap: 6px;
}
.m-sum-hot-i {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 8px;
padding: 7px 8px;
background: var(--m-bg-3);
border-radius: var(--m-r-s);
border-left: 3px solid var(--m-acc);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-sum-hot-i:active { background: var(--m-bg-4); }
.m-sum-hot-i.red { border-left-color: #E87575; }
.m-sum-hot-i.amber { border-left-color: #D2954A; }
.m-sum-hot-t {
font-size: 12px;
font-weight: 600;
color: var(--m-text-1);
line-height: 1.3;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.m-sum-hot-m {
font-size: 10px;
color: var(--m-text-3);
text-align: right;
white-space: nowrap;
align-self: start;
}
.m-sum-hot-m.red { color: #E87575; font-weight: 700; }
.m-sum-hot-m.amber { color: #D2954A; font-weight: 700; }
.m-sum-empty {
text-align: center;
color: var(--m-text-3);
font-size: 12px;
padding: 16px 8px;
}
/* ─── Категории 3 колонки ─────────────── */
.m-cats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
padding: 0 var(--m-pad) var(--m-gap);
}
.m-cat {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
padding: 14px 8px 12px;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
/* Медная полоса 2px сверху — фирменный СГИ */
.m-cat::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.85;
}
/* Категории с задачами (модификатор) — постоянное мягкое свечение */
.m-cat.has-tasks {
border-color: rgba(210,106,26,0.30);
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.18);
}
.m-cat:active {
transform: scale(0.96);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft), 0 6px 20px var(--m-acc-glow);
}
.m-cat-ico {
font-size: 24px;
margin-bottom: 4px;
}
.m-cat-l {
font-size: 10px;
color: var(--m-text-2);
line-height: 1.15;
word-break: break-word;
hyphens: auto;
}
.m-cat-v {
font-size: 13px;
font-weight: 800;
color: var(--m-acc);
margin-top: 4px;
}
/* ─── Bottom Sheet (модалка снизу) ────── */
.m-sheet-bg {
position: fixed; inset: 0;
/* m200-B5-Z5: плотнее затемнение, чтобы цветные кнопки фона не просвечивали через верхнюю
полосу sheet'а (8% высоты экрана сверху всё равно видна — раньше она была светлая).
m200-Z95: ещё плотнее + лёгкий blur — задний экран не должен мешать читать карточку. */
background: rgba(0,0,0,0.90);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
z-index: 10000;
display: none;
animation: m-fade .25s ease;
}
.m-sheet-bg.open { display: block; }
.m-sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
/* m111-extra2: фиксированная высота, чтобы sheet не "прыгал" при смене вкладок внутри.
Раньше использовали max-height — sheet подстраивался под контент. */
height: 92svh;
max-height: 92svh;
/* m200-B5-Z5: z-index выше бургера (9999), чтобы он не вылезал поверх. */
z-index: 10001;
/* m200-Z95: сплошной непрозрачный фон. m200-Z97 ОТКАТ: используем var(--m-bg-2) обратно,
иначе светлая тема ломалась (карточка оставалась тёмной поверх светлого основного экрана).
Все наши --m-bg-* цвета без альфы — это сплошные HEX, так что просвечивания не будет. */
background: var(--m-bg-2);
border-radius: 18px 18px 0 0;
box-shadow: 0 -8px 32px rgba(0,0,0,0.6);
/* m200-Z139: убран дублирующий z-index:501 (был перекрыт строкой 10001 выше).
Оставлен один правильный — 10001, чтобы sheet перекрывал бургер (9999). */
transform: translateY(100%);
transition: transform .3s cubic-bezier(0.32,0.72,0,1);
display: flex; flex-direction: column;
overflow: hidden;
}
/* Медная полоса под handle */
.m-sheet::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
opacity: 0.85;
z-index: 2;
}
.m-sheet.open { transform: translateY(0); }
/* m118d: Полноэкранный режим — для больших форм (редактор карты).
Учитываем чёлку iPhone (safe-area-inset-top), чтобы шапка не залезала под статус-бар. */
.m-sheet.m-sheet-fs {
max-height: 100svh;
height: 100svh;
border-radius: 0;
padding-top: env(safe-area-inset-top);
}
.m-sheet-handle {
width: 36px; height: 5px;
background: var(--m-sep-2);
border-radius: 99px;
margin: 8px auto 4px;
flex: none;
}
.m-sheet-head {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px 12px;
flex: none;
}
/* m200-Z296/Z297: в режиме открытого чата прячем ТЕКСТ заголовка шторки —
иначе вверху висело чужое имя («Павлов · 14») над шапкой чата (Бородулин),
плюс между ними была синяя полоска-зазор. Оставляем только крестик ✕.
Сжимаем шапку шторки до минимума, чтобы шапка чата прилегала вплотную. */
/* m200-Z300: в режиме чата ПОЛНОСТЬЮ прячем шапку шторки (крестик ✕ шторки + заголовок).
Крестик теперь живёт в самой шапке чата — в одной строке с фамилией и корзиной. */
.m-sheet.m-chat-open .m-sheet-head { display: none !important; }
/* m200-Z302: в режиме чата ПОЛНОСТЬЮ убираем handle-полоску — именно она с отступами
давала тёмную щель над шапкой чата. Свайп вниз для закрытия всё равно работает по
всей шторке, а закрыть можно крестиком ✕. Шапка чата теперь у самого верха. */
.m-sheet.m-chat-open .m-sheet-handle { display: none !important; }
/* Прячем нижний футер шторки («Отметить все прочитанными») — в чате он лишний
и оставлял пустую полосу + кнопку под формой ввода. */
.m-sheet.m-chat-open .m-sheet-foot { display: none !important; }
.m-sheet-title {
flex: 1;
font-size: var(--m-h2);
font-weight: 700;
color: var(--m-text-1);
}
/* m200-Z50: красный крестик в красном круге — заметный на любом фоне.
m200-Z92: жёстко фиксируем 36×36 с aspect-ratio и !important — иначе
flex-родители растягивают кнопку в овал. */
/* m200-Z151: универсальный эталонный круглый крестик. Используется ВЕЗДЕ в проекте
где нужна кнопка-закрытие (превью файла, чипсы, мелкие сноски). Полностью повторяет
стиль .m-sheet-close, но в виде отдельного класса с !important для inline-перебивов. */
.mt-x-circle {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 36px !important;
border-radius: 50% !important;
background: rgba(226, 85, 85, 0.18) !important;
border: 1.5px solid rgba(226, 85, 85, 0.6) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
font-size: 0 !important;
line-height: 1 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-sizing: border-box !important;
font-family: -apple-system, system-ui, sans-serif !important;
-webkit-tap-highlight-color: transparent !important;
transition: transform .15s ease, background .2s ease;
}
.mt-x-circle::before {
content: '×';
display: block;
transform: translateY(-1px);
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #E25555;
}
.mt-x-circle:active {
transform: scale(0.92);
background: #E25555 !important;
border-color: #E25555 !important;
}
.mt-x-circle:active::before {
color: #fff;
}
.m-sheet-close {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 36px !important;
border-radius: 50% !important;
background: rgba(226, 85, 85, 0.18);
color: #E25555;
border: 1.5px solid rgba(226, 85, 85, 0.6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
font-size: 0;
line-height: 1;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
font-family: -apple-system, system-ui, sans-serif;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.m-sheet-close::before {
content: '×';
display: block;
transform: translateY(-1px);
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #E25555;
}
.m-sheet-close:hover {
background: rgba(226, 85, 85, 0.28);
border-color: rgba(226, 85, 85, 0.8);
}
.m-sheet-close:active {
transform: scale(0.92);
background: #E25555;
border-color: #E25555;
}
.m-sheet-close:active::before {
color: #fff;
}
.m-sheet-body {
flex: 1;
overflow-y: auto;
/* m97.1: запрещаем горизонтальный скролл — длинные слова без пробелов
не должны выкидывать содержимое за пределы экрана */
overflow-x: hidden;
padding: 4px var(--m-pad) 16px;
-webkit-overflow-scrolling: touch;
/* Не передавать скролл наружу когда долистали до края */
overscroll-behavior: contain;
/* Принудительный перенос длинных «слов» (например ОООООО...РРРР...) */
overflow-wrap: anywhere;
word-break: break-word;
}
/* Когда sheet открыт — фиксируем body, чтобы фон не уезжал */
body.m-sheet-open {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}
/* Затемнение под sheet — не реагирует на тач-скролл */
.m-sheet-bg {
touch-action: none;
}
/* Сам sheet тоже не передаёт скролл */
.m-sheet {
overscroll-behavior: contain;
}
.m-sheet-foot {
flex: none;
/* env(safe-area-inset-bottom) — отступ под home-indicator iPhone */
padding: 12px var(--m-pad) calc(12px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--m-sep);
background: var(--m-bg-2);
display: flex; gap: 8px;
/* m200-Z139: убрали position:sticky — внутри flex-column sheet footer и так держится снизу
как обычный flex-item с flex:none. На iOS Safari sticky внутри overflow:auto родителя
иногда выводил footer за пределы клик-зоны (Раиль 27.05: «кнопки Сохранить идею и Отмена
не работают после записи»). С relative + z-index клики стабильно проходят. */
position: relative;
z-index: 2;
}
/* m200-Z111: «подложка» снизу — закрывает щель между футером и клавиатурой/нижним краем
экрана в iOS PWA. Если ничего не закрыть — через эту щель просвечивает фон с цветными
кнопками главной (особенно у синей «Делегировать»). */
.m-sheet-foot::after {
content: '';
position: absolute;
top: 100%;
left: 0; right: 0;
height: 200px;
background: var(--m-bg-2);
pointer-events: none;
}
.m-sheet-foot .m-btn-primary,
.m-sheet-foot .m-btn-secondary {
margin: 0;
flex: 1;
width: auto;
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
/* Пульсация для активного микрофона */
@keyframes m-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232,117,117,0.5); }
50% { box-shadow: 0 0 0 8px rgba(232,117,117,0); }
}
/* ─── Кнопка приоритета (Срочно/Важно/Обычно) ─── */
.m-pri-btn {
height: 42px;
display: grid;
place-items: center;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
font-size: 13px;
font-weight: 600;
cursor: pointer;
color: var(--m-text-2);
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.m-pri-btn:active { transform: scale(0.96); }
.m-pri-btn.active {
background: var(--m-acc-grad);
border-color: var(--m-acc);
color: #fff;
font-weight: 700;
box-shadow:
0 0 0 2px var(--m-acc-soft),
0 4px 14px var(--m-acc-glow),
inset 0 1px 0 rgba(255,255,255,0.15);
}
/* ─── Форма (поля) ────────────────────── */
.m-field {
margin-bottom: 12px;
}
.m-field label {
display: block;
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
margin-bottom: 6px;
}
.m-field input,
.m-field select,
.m-field textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
background: var(--m-bg-3) !important;
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
color: var(--m-text-1) !important;
font-size: 16px;
font-family: inherit;
box-shadow: 0 0 0 1px rgba(210,106,26,0.10);
}
.m-field textarea { min-height: 80px; resize: vertical; }
.m-field input:focus,
.m-field select:focus,
.m-field textarea:focus {
outline: none;
border-color: var(--m-acc);
box-shadow: 0 0 0 3px var(--m-acc-soft);
}
/* ─── FAB ─────────────────────────────── */
.m-fab {
position: fixed;
right: 16px; bottom: 16px;
width: 56px; height: 56px;
border-radius: 99px;
background: var(--m-acc-grad);
color: #fff;
border: none;
font-size: 28px;
display: grid; place-items: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 16px var(--m-acc-glow);
z-index: 100;
cursor: pointer;
}
.m-fab:active { transform: scale(0.95); }
/* В Задачнике на мобайле скрываем глобальный FAB — есть «+ Новая задача» сверху */
body[data-tasker-mobile] #fabBtn { display: none !important; }
/* ═════════════════════════════════════════════════ */
/* МОБИЛЬНЫЙ САЙДБАР — графит + медь (фирменный стиль) */
/* ═════════════════════════════════════════════════ */
.sidebar {
background: var(--m-bg-2) !important;
border-right: 1px solid var(--m-sep) !important;
color: var(--m-text-1) !important;
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
/* Медная полоса справа от сайдбара */
.sidebar::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 2px;
background: var(--m-acc-grad);
opacity: 0.5;
}
/* Брэнд-блок «FailRATR» */
.sidebar .brand {
color: var(--m-text-1) !important;
border-bottom: 1px solid var(--m-sep) !important;
padding: 8px 12px 14px !important;
margin-bottom: 10px !important;
}
.sidebar .brand-logo {
background: var(--m-acc-grad) !important;
box-shadow: 0 2px 8px var(--m-acc-glow);
}
/* Блок «Вы вошли как ...» */
.sidebar #user-switcher {
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
padding: 10px 12px !important;
margin: 0 8px 12px !important;
border-bottom: 1px solid var(--m-sep-2) !important;
position: relative;
}
/* Медная полоса сверху */
.sidebar #user-switcher::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
border-radius: 10px 10px 0 0;
}
.sidebar #user-switcher > div:first-child {
color: var(--m-text-3) !important;
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
margin-bottom: 5px;
}
.sidebar #user-switcher [style*="font-weight:600"],
.sidebar #user-switcher [style*="font-weight: 600"] {
color: var(--m-text-1) !important;
font-size: 14px !important;
}
/* Кнопка «Выйти» — медная вторичная */
.sidebar #user-switcher button {
background: rgba(210,106,26,0.18) !important;
color: var(--m-acc) !important;
border: 1px solid var(--m-acc) !important;
border-radius: 7px !important;
padding: 6px 12px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
-webkit-tap-highlight-color: transparent;
}
.sidebar #user-switcher button:active {
background: var(--m-acc) !important;
color: #fff !important;
}
/* Заголовки разделов «Главное», «Список отчётов», «Настройки» */
.sidebar .nav-section {
color: var(--m-text-3) !important;
font-size: 10px !important;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 800;
padding: 14px 12px 6px !important;
}
/* Пункты меню */
.sidebar .nav-item {
color: var(--m-text-1) !important;
background: transparent !important;
padding: 10px 12px !important;
border-radius: 8px !important;
margin: 0 8px 2px !important;
transition: background .15s ease, box-shadow .2s ease, color .2s ease;
font-size: 14px;
-webkit-tap-highlight-color: transparent;
}
.sidebar .nav-item:hover {
background: var(--m-bg-3) !important;
}
.sidebar .nav-item:active {
background: var(--m-acc-soft) !important;
box-shadow: inset 0 0 0 1px var(--m-acc-soft);
}
/* Активный пункт — медный градиент с белым текстом */
.sidebar .nav-item.active {
background: var(--m-acc-grad) !important;
color: #fff !important;
box-shadow:
0 0 0 1px var(--m-acc-soft),
0 4px 14px var(--m-acc-glow),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.sidebar .nav-item.active .nav-badge {
background: rgba(255,255,255,0.30) !important;
color: #fff !important;
}
.sidebar .nav-icon {
font-size: 16px !important;
}
.sidebar .nav-badge {
background: var(--m-bg-3) !important;
color: var(--m-text-2) !important;
border: 1px solid var(--m-sep);
}
/* Бейдж «На проверке» — красный когда есть число */
.sidebar #badge-security[style*="background:#b85450"] {
background: var(--m-bad) !important;
color: #fff !important;
border: none;
}
/* ─── Карта в стиле iOS-карточки ───────── */
.m-card {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
padding: var(--m-pad-card);
margin: 0 var(--m-pad) var(--m-gap);
position: relative;
overflow: hidden;
}
/* Карточка с акцентной медной полосой */
.m-card-acc::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.m-card-acc {
border-color: rgba(210,106,26,0.30);
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.18);
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.m-card-acc:active {
transform: scale(0.98);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft), 0 6px 20px var(--m-acc-glow);
}
.m-card-h {
font-size: var(--m-h3);
font-weight: 700;
color: var(--m-text-1);
margin-bottom: 8px;
}
.m-card-b {
font-size: var(--m-body);
color: var(--m-text-2);
line-height: 1.45;
}
/* Компактные кнопки действий в шаге */
.m-step-act {
padding: 3px 8px;
font-size: 10.5px;
font-weight: 600;
border: 1px solid transparent;
border-radius: 5px;
background: var(--m-bg-3);
color: var(--m-text-1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
line-height: 1.2;
white-space: nowrap;
}
.m-step-act.ok { border-color: var(--m-ok); color: var(--m-ok); }
.m-step-act.warn { border-color: var(--m-warn); color: var(--m-warn); }
.m-step-act.bad { border-color: var(--m-bad); color: var(--m-bad); }
.m-step-act:active { transform: scale(0.95); opacity: 0.85; }
/* ─── Скрываем десктоп-вёрстку в наших модулях ─── */
/* Конкретные скрытия применяются в местах рендера */
body[data-mobile-replaced] .tasker-desktop { display: none !important; }
body:not([data-mobile-replaced]) .tasker-mobile { display: none !important; }
/* Класс-хэлпер: показывать только на мобильном/десктопе */
.m-only { display: block; }
.d-only { display: none !important; }
}
/* Десктоп */
@media (min-width: 769px) {
.m-only { display: none !important; }
.d-only { display: block; }
}
/* ═══════════════════════════════════════════════════════════
⚡ БЫСТРАЯ ЗАДАЧА — стили (Задачник v3 · Этап 1)
═══════════════════════════════════════════════════════════ */
/* Ряд из двух кнопок в шапке обзора */
.m-new-row {
display: flex;
gap: 8px;
margin: 0 var(--m-pad) var(--m-gap);
}
.m-new-row .m-btn-primary {
flex: 1;
margin: 0;
}
.m-btn-fast {
flex: 1;
padding: 11px 14px;
background: linear-gradient(180deg, #E87E2E, #C36419);
border: none;
color: #fff;
font-size: 13.5px;
font-weight: 800;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 2px 10px var(--m-acc-glow);
-webkit-tap-highlight-color: transparent;
}
.m-btn-fast:active { transform: scale(0.97); }
/* Шапка шага */
.mt-fast-h {
font-size: 17px;
font-weight: 800;
color: var(--m-text-1);
margin: 4px 0 12px;
text-align: center;
}
.mt-fast-h3 {
font-size: 17px;
font-weight: 800;
color: var(--m-text-1);
margin: 4px 0 10px;
}
/* Сетка людей */
.mt-fast-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.mt-fast-ppl {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 11px;
text-align: left;
cursor: pointer;
transition: .15s;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-fast-ppl:active {
border-color: var(--m-acc);
background: var(--m-acc-soft);
transform: scale(0.98);
}
.mt-fast-ava {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
font-size: 15px;
flex: none;
}
.mt-fast-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.mt-fast-n {
font-size: 13px;
font-weight: 700;
color: var(--m-text-1);
line-height: 1.2;
}
.mt-fast-r {
font-size: 11px;
color: var(--m-text-3);
}
/* Шаг 2 — голос */
.mt-fast-step2 {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 8px 0;
}
.mt-fast-for {
font-size: 13px;
color: var(--m-text-2);
}
.mt-fast-for b { color: var(--m-acc); font-weight: 800; }
.mt-fast-listen {
padding: 4px 11px;
background: var(--m-bad);
color: #fff;
border-radius: 99px;
font-size: 11.5px;
font-weight: 800;
animation: m-pulse 1.2s ease-in-out infinite;
}
/* m122k: лента передач/смен куратора в карточке задачи */
.mt-th-list{ display: flex; flex-direction: column; gap: 8px; }
.mt-th-row{
display: flex; gap: 10px; align-items: flex-start;
padding: 8px 10px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: 8px;
}
.mt-th-ico{ font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.mt-th-text{ flex: 1; font-size: 12.5px; color: var(--m-text-1); line-height: 1.5; }
.mt-th-text b{ font-weight: 600; color: var(--m-text-1); }
.mt-th-meta{ font-size: 11px; color: var(--m-text-3); margin-top: 3px; }
/* m122g: универсальная SVG-иконка микрофона (заменяет emoji 🎙 везде на сайте) */
.tm-mic-svg{
display: block;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.tm-mic-svg.size-sm{ width: 18px; height: 18px; flex: none; }
.tm-mic-svg.size-md{ width: 18px; height: 18px; flex: none; }
.tm-mic-svg.size-lg{ width: 42px; height: 42px; flex: none; }
.mt-fast-mic {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--m-acc-grad);
border: none;
color: #fff;
font-size: 40px;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 6px 22px var(--m-acc-glow);
-webkit-tap-highlight-color: transparent;
margin: 4px 0;
}
.mt-fast-mic:active { transform: scale(0.95); }
.mt-fast-label {
font-size: 12.5px;
color: var(--m-text-2);
line-height: 1.4;
padding: 0 14px;
}
.mt-fast-text {
width: 100%;
min-height: 90px;
/* Z274: убрали max-height 220px — длинная диктовка обрезалась.
Высота растёт под содержимое через oninput → window.TaskerMobile.autoGrow(this). */
padding: 12px 14px;
background: var(--m-bg-2);
border: 2px solid var(--m-acc);
border-radius: 12px;
font-size: 14px;
color: var(--m-text-1);
line-height: 1.5;
font-family: inherit;
resize: none;
overflow: hidden;
}
.mt-fast-text:focus { outline: none; box-shadow: 0 0 0 2px var(--m-acc-soft); }
.mt-fast-tip {
font-size: 11.5px;
color: var(--m-text-3);
text-align: center;
line-height: 1.4;
padding: 0 8px;
}
/* Шаг 3 — даты */
.mt-fast-preview {
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 9px;
font-size: 12.5px;
color: var(--m-text-1);
line-height: 1.5;
}
.mt-fast-preview b { color: var(--m-acc); font-weight: 800; margin-right: 6px; }
.mt-fast-dates {
display: flex;
gap: 6px;
margin-top: 10px;
}
.mt-fast-date {
flex: 1;
padding: 12px 6px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
color: var(--m-text-1);
font-size: 13px;
font-weight: 700;
text-align: center;
cursor: pointer;
line-height: 1.3;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-fast-date small {
display: block;
font-size: 10.5px;
color: var(--m-text-3);
font-weight: 600;
margin-top: 2px;
}
.mt-fast-date.primary {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
.mt-fast-date.primary small { color: var(--m-acc); opacity: 0.85; }
.mt-fast-date.no {
color: var(--m-text-3);
}
.mt-fast-date:active {
transform: scale(0.97);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* Разделитель «или» между датами и большой кнопкой «без даты» */
.mt-fast-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 10px;
color: var(--m-text-3);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
}
.mt-fast-divider::before,
.mt-fast-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--m-sep-2);
}
/* Маленькая зелёная кнопка «Без даты» на шаге диктовки (footer) */
.mt-fast-nodate-btn {
background: rgba(110,168,137,0.16) !important;
color: var(--m-ok) !important;
border-color: rgba(110,168,137,0.45) !important;
font-weight: 800 !important;
}
.mt-fast-nodate-btn:active {
background: rgba(110,168,137,0.28) !important;
transform: scale(0.97);
}
/* m200-Z179: «Отправить без даты» — фон и обводка в акценте темы (был зелёный хардкод).
Тёмный фон с медной/зелёной/фиолетовой обводкой по выбранной теме. */
.mt-fast-nodate {
width: 100%;
padding: 14px 16px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-acc);
border-radius: 12px;
color: var(--m-acc);
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
display: flex;
flex-direction: column;
gap: 3px;
}
.mt-fast-nodate:active {
transform: scale(0.98);
background: rgba(0,0,0,0.04);
}
.mt-fast-nodate-t {
font-size: 15px;
font-weight: 800;
color: var(--m-acc);
}
.mt-fast-nodate-s {
font-size: 11.5px;
font-weight: 500;
color: var(--m-text-3);
}
/* ═══════════════════════════════════════════════════════════
💡 ИДЕЯ — стили (Задачник v3 · Этап 2)
═══════════════════════════════════════════════════════════ */
.m-btn-idea {
width: 100%;
padding: 11px 14px;
background: var(--m-acc-grad);
border: none;
color: #fff;
font-size: 13.5px;
font-weight: 800;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 2px 10px var(--m-acc-glow);
-webkit-tap-highlight-color: transparent;
}
.m-btn-idea:active { transform: scale(0.98); }
/* m130-projects: длинная цветная плашка «Проекты» — в семействе нижних KPI-плашек.
Глубокий стально-синий градиент #3A7AA8 → #2C5E80 (blue-soft). */
.m-btn-projects {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
min-height: 64px;
padding: 12px 16px;
/* Z289: «Проекты» — СЛИВА (purple ramp 600→800). Раньше был сине-серый, сливался. */
background: linear-gradient(180deg, #534AB7 0%, #3C3489 100%);
border: none;
border-radius: 12px;
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
text-align: left;
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
-webkit-tap-highlight-color: transparent;
overflow: hidden;
transition: transform .15s ease, box-shadow .2s ease;
}
/* Z289: «Чек-лист на сегодня» — ИЗУМРУД (green ramp 600→800). Выделяется от Проектов. */
.m-btn-projects.m-btn-projects--checklist {
background: linear-gradient(180deg, #3B6D11 0%, #27500A 100%);
}
.m-btn-projects:active {
transform: scale(0.99);
box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.m-btn-projects-ic {
width: 42px; height: 42px;
border-radius: 11px;
background: rgba(255,255,255,0.18);
display: grid; place-items: center;
font-size: 22px; color: #fff;
flex: none;
border: 1px solid rgba(255,255,255,0.25);
backdrop-filter: blur(4px);
}
.m-btn-projects-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-btn-projects-t {
font-size: 16px;
font-weight: 800;
color: #fff;
line-height: 1.2;
}
.m-btn-projects-sub {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.85);
line-height: 1.2;
}
.m-btn-projects-arr {
font-size: 24px;
color: rgba(255,255,255,0.85);
font-weight: 300;
flex: none;
}
/* m130-projects: список проектов в sheet */
.mt-proj-section-h {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
padding: 14px 0 6px;
}
.mt-proj-item {
position: relative;
display: flex;
gap: 12px;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-bottom: 9px;
cursor: pointer;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.mt-proj-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-proj-item:active {
transform: scale(0.99);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft), 0 6px 20px var(--m-acc-glow);
}
.mt-proj-ic {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 20px; color: var(--m-acc);
flex: none;
border: 1px solid rgba(224,168,92,0.25);
}
.mt-proj-body { flex: 1; min-width: 0; }
.mt-proj-title {
font-size: 14.5px; font-weight: 800;
color: var(--m-text-1);
line-height: 1.3;
}
.mt-proj-meta {
font-size: 11px; color: var(--m-text-3);
margin-top: 5px;
display: flex; gap: 9px; flex-wrap: wrap;
}
.mt-proj-prog {
margin-top: 8px; height: 6px;
background: var(--m-bg-3); border-radius: 3px; overflow: hidden;
}
.mt-proj-prog-bar { height: 100%; background: var(--m-acc-grad); }
.mt-proj-role {
display: flex; align-items: center; gap: 8px;
margin-top: 7px;
font-size: 10.5px;
}
.mt-proj-role-chip {
padding: 2px 8px;
border-radius: 7px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mt-proj-role-pm { background: var(--m-acc-grad); color: #fff; }
.mt-proj-role-curator { background: rgba(127,174,207,0.18); color: var(--m-info); }
.mt-proj-role-lead { background: rgba(224,168,92,0.15); color: var(--m-acc); border: 1px solid rgba(224,168,92,0.30); }
.mt-proj-role-doer { background: var(--m-bg-3); color: var(--m-text-2); }
.mt-proj-role-watcher { background: rgba(124,128,137,0.18); color: var(--m-text-3); }
.mt-proj-role-full_access { background: rgba(224,168,92,0.15); color: var(--m-acc); border: 1px dashed rgba(224,168,92,0.30); }
.mt-proj-prog-pct { font-weight: 800; color: var(--m-text-2); }
.mt-proj-light { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; }
.mt-proj-arr {
align-self: center;
color: var(--m-text-3);
font-size: 22px; flex: none;
}
/* Карточка проекта (A3) — все плашки в едином стиле Graphite + бронзовая полоска сверху */
/* Шапка проекта = карточка m-card-acc */
.mt-stub-head {
position: relative;
display: flex; gap: 12px;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-bottom: 14px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-stub-head::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-stub-ic {
width: 44px; height: 44px;
border-radius: 11px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 22px; color: var(--m-acc);
flex: none;
border: 1px solid rgba(224,168,92,0.25);
}
.mt-stub-h-body { flex: 1; min-width: 0; }
.mt-stub-h-title { font-size: 16px; font-weight: 800; line-height: 1.25; }
.mt-stub-h-goal { font-size: 12px; color: var(--m-text-3); margin-top: 4px; line-height: 1.45; }
/* Сетка плашек (Куратор/Руководитель/Старт/...) — каждая с медной полоской сверху */
.mt-stub-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
padding: 4px 0 4px;
}
.mt-stub-grid > div {
position: relative;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-stub-grid > div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-stub-lbl {
font-size: 10px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
}
.mt-stub-val { font-size: 13px; color: var(--m-text-1); margin-top: 3px; }
.mt-stub-section-h {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
margin: 16px 0 8px;
}
/* Направление (Юридическое/Кадры/...) — карточка с полоской */
.mt-stub-stream {
position: relative;
display: flex; gap: 11px; align-items: center;
padding: 11px 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-bottom: 8px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-stub-stream::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-stub-stream-ic {
width: 32px; height: 32px; border-radius: 9px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 15px; flex: none;
border: 1px solid rgba(224,168,92,0.20);
}
.mt-stub-stream-body { flex: 1; min-width: 0; }
.mt-stub-stream-t { font-size: 13.5px; font-weight: 700; }
.mt-stub-stream-s { font-size: 11px; color: var(--m-text-3); margin-top: 2px; }
.mt-stub-light {
width: 10px; height: 10px; border-radius: 50%; flex: none;
box-shadow: 0 0 6px currentColor;
}
/* Член команды — карточка с полоской, не плоская строка */
.mt-stub-member {
position: relative;
display: flex; gap: 11px; align-items: center;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-bottom: 7px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-stub-member::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-stub-av {
width: 38px; height: 38px; border-radius: 50%;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 12px; font-weight: 800;
color: var(--m-acc); flex: none;
border: 1px solid rgba(224,168,92,0.25);
}
.mt-stub-mb { flex: 1; min-width: 0; }
.mt-stub-mn { font-size: 13.5px; font-weight: 700; color: var(--m-text-1); }
.mt-stub-mp { font-size: 11px; color: var(--m-text-3); margin-top: 1px; }
.mt-stub-rolechip {
padding: 3px 9px;
border-radius: 7px;
font-weight: 800;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
flex: none;
}
/* Информационная плашка (подсказка) — сдержанный графит, без яркого синего */
.mt-stub-todo {
position: relative;
margin-top: 16px;
padding: 12px 13px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 3px solid var(--m-acc);
border-radius: var(--m-r-m);
font-size: 11.5px;
color: var(--m-text-2);
line-height: 1.5;
}
.mt-stub-todo b { color: var(--m-acc); }
/* m200-B4-3: пустое превью протокола — шаги 1-2-3 в фирменном стиле */
.mt-empty-step {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 11px 13px;
margin: 0 0 8px;
background: var(--m-card);
border: 1px solid var(--m-sep);
border-left: 3px solid var(--m-acc);
border-radius: 12px;
}
.mt-empty-num {
flex: 0 0 26px;
height: 26px;
border-radius: 50%;
background: var(--m-acc);
color: #fff;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.mt-empty-body {
flex: 1;
font-size: 13px;
line-height: 1.45;
color: var(--m-text-1);
}
.mt-empty-body b { color: var(--m-acc); }
/* m130e-fix: контейнер карточки проекта — растягиваем до низа sheet,
чтобы под подвалом не было видно тёмной полосы основного экрана */
.mt-proj-card {
min-height: calc(100vh - 200px);
padding-bottom: 24px;
}
/* m130u-2: кнопка «СТИЛЬ» — двуцветная (медь | зелёный), чтобы было понятно
что это переключатель темы. В светлой теме порядок цветов меняется. */
.mt-theme-btn {
width: auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
overflow: visible !important;
}
.mt-theme-label {
display: inline-block;
padding: 5px 10px;
border-radius: 10px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.4px;
color: #fff;
background: linear-gradient(90deg, #E0A85C 0%, #E0A85C 50%, #21A038 50%, #21A038 100%);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
line-height: 1;
}
.mt-theme-btn.mt-theme-light .mt-theme-label {
background: linear-gradient(90deg, #21A038 0%, #21A038 50%, #E0A85C 50%, #E0A85C 100%);
}
/* m130u-#11: «← Назад» в шапке Задачника, появляется когда есть куда возвращаться */
/* m200-B5-Z: компактнее, чтобы колокольчик не уезжал за край на узких экранах */
.mt-back-btn {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: var(--m-acc) !important;
padding: 0 6px !important;
width: auto !important;
min-width: 28px !important;
flex: none;
}
/* m200-Z293 (01.06.2026): компактная шапка Задачника — ВСЕГДА, на любом телефоне.
Раньше сжатие включалось только при max-width:400px (iPhone SE). На новых широких
телефонах (iPhone 17 Air ~440px и т.п.) правило не срабатывало → крупные иконки 44px
не помещались и колокольчик с бейджем уезжал за край. Теперь ряд иконок компактный
и ровный на всех экранах: и на 14 Pro Max, и на 17 Air, и на будущих моделях. */
body[data-tasker-mobile] .m-topbar {
gap: 2px !important;
padding-left: calc(6px + env(safe-area-inset-left, 0px)) !important;
padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
}
/* Одинаковый размер у всех кнопок шапки — равные расстояния визуально */
body[data-tasker-mobile] .m-topbar-action {
width: 36px !important; height: 36px !important; font-size: 17px !important;
margin: 0 !important; padding: 0 !important;
}
/* Заголовок мельче, "в разработке · версия" в одну строку */
body[data-tasker-mobile] .m-topbar-title { font-size: 15px !important; line-height: 1.12 !important; }
body[data-tasker-mobile] .m-topbar-beta { font-size: 9.5px !important; opacity: 0.75 !important; }
/* Кнопка "Стиль" компактнее */
body[data-tasker-mobile] #mt-theme .mt-theme-label {
padding: 4px 9px !important;
font-size: 10.5px !important;
letter-spacing: 0.3px !important;
}
body[data-tasker-mobile] .mt-theme-btn { transform: scale(0.92); transform-origin: center; }
/* На очень узких экранах (iPhone SE) прячем подпись "в разработке · версия" совсем */
@media (max-width: 380px) {
body[data-tasker-mobile] .m-topbar-beta { display: none !important; }
body[data-tasker-mobile] .m-topbar-title { font-size: 13px !important; }
body[data-tasker-mobile] .m-topbar-action { width: 34px !important; height: 34px !important; font-size: 16px !important; }
}
/* m200-Z69: переопределение бейджа удалено — единый стиль задаётся в основном правиле выше */
/* m130u-#7: миниатюрные плашки «принял за N» / «не принял» рядом с фамилиями ролей */
.mt-ack-mini {
display: inline-block;
padding: 1px 7px;
border-radius: 6px;
font-size: 10.5px;
font-weight: 700;
margin-left: 4px;
white-space: nowrap;
vertical-align: middle;
}
.mt-ack-mini.fast { background: rgba(95,191,127,0.18); color: var(--m-ok); }
.mt-ack-mini.ok { background: rgba(127,174,207,0.18); color: var(--m-info); }
.mt-ack-mini.warn { background: rgba(210,149,74,0.18); color: var(--m-warn); }
.mt-ack-mini.bad { background: rgba(208,90,90,0.18); color: var(--m-bad); }
/* m200-Z239: «не принял» — ярко-красный с обводкой, чтоб бросалось в глаза. Раньше был тусклый серый. */
.mt-ack-mini.wait { background: rgba(232,117,117,0.18); color: var(--m-bad); border: 1px solid rgba(232,117,117,0.5); font-weight: 700; }
/* m130x-2: кнопка «Выбрать файлы» в формах задачи — одинаковая ширина с полями */
.mt-pick-file-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
min-height: 44px;
padding: 10px 14px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
color: var(--m-text-1);
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-pick-file-btn:active {
transform: scale(0.99);
border-color: var(--m-acc);
}
/* m130x-#23: форма «Сменить куратора» в фирменном стиле */
.mt-cc-wrap { padding: 4px 0 8px; }
.mt-cc-hint {
font-size: 12.5px;
color: var(--m-text-2);
line-height: 1.5;
padding: 10px 12px;
background: rgba(127,174,207,0.08);
border: 1px solid rgba(127,174,207,0.25);
border-radius: 9px;
margin-bottom: 14px;
}
.mt-cc-hint b { color: var(--m-text-1); font-weight: 800; }
.mt-cc-current {
padding: 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 11px;
margin-bottom: 14px;
}
.mt-cc-current-empty { border-style: dashed; }
.mt-cc-current-l {
font-size: 10.5px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
margin-bottom: 8px;
}
.mt-cc-current-row { display: flex; gap: 11px; align-items: center; }
.mt-cc-av {
width: 38px; height: 38px; border-radius: 50%;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 13px; font-weight: 800;
color: var(--m-acc);
border: 1px solid rgba(224,168,92,0.30);
flex: none;
}
.mt-cc-name { font-size: 14px; font-weight: 800; color: var(--m-text-1); }
.mt-cc-pos { font-size: 11.5px; color: var(--m-text-3); margin-top: 2px; }
.mt-cc-section-h {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
margin-bottom: 8px;
}
.mt-cc-chips {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 10px;
}
.mt-cc-chip {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep);
border-radius: 11px;
color: var(--m-text-1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
text-align: left;
width: 100%;
transition: border-color .15s ease, background .15s ease;
}
.mt-cc-chip:active { transform: scale(0.99); }
.mt-cc-chip.active {
border-color: var(--m-acc);
background: var(--m-acc-soft);
}
.mt-cc-chip-av {
width: 36px; height: 36px; border-radius: 50%;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 12px; font-weight: 800;
color: var(--m-text-2);
flex: none;
border: 1px solid var(--m-sep-2);
}
.mt-cc-chip.active .mt-cc-chip-av {
background: var(--m-acc);
color: #fff;
border-color: var(--m-acc);
}
.mt-cc-chip-body { flex: 1; min-width: 0; text-align: left; }
.mt-cc-chip-name {
font-size: 13.5px; font-weight: 700;
color: var(--m-text-1);
line-height: 1.2;
}
.mt-cc-chip-pos {
font-size: 11px; color: var(--m-text-3);
margin-top: 2px;
}
.mt-cc-chip-check {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--m-acc);
color: #fff;
display: grid; place-items: center;
font-size: 14px; font-weight: 800;
flex: none;
opacity: 0;
transition: opacity .15s ease;
}
.mt-cc-chip.active .mt-cc-chip-check { opacity: 1; }
.mt-cc-remove {
display: block;
width: 100%;
padding: 10px 12px;
background: transparent;
border: 1.5px dashed var(--m-bad);
color: var(--m-bad);
border-radius: 11px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
margin-bottom: 8px;
-webkit-tap-highlight-color: transparent;
}
.mt-cc-remove.active {
background: rgba(208,90,90,0.10);
border-style: solid;
}
.mt-cc-reason {
width: 100%;
box-sizing: border-box;
min-height: 72px;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 10px;
color: var(--m-text-1);
font-size: 13px;
font-family: inherit;
resize: vertical;
}
.mt-cc-reason-hint {
font-size: 11px;
color: var(--m-text-3);
margin-top: 6px;
line-height: 1.4;
}
.mt-mini-remind {
display: inline;
margin-left: 4px;
padding: 0;
background: transparent;
border: none;
font-size: 12px;
line-height: 1;
cursor: pointer;
vertical-align: baseline;
-webkit-tap-highlight-color: transparent;
filter: saturate(1.2);
}
.mt-mini-remind:active { opacity: 0.6; }
/* m130c-A4: Вкладки карточки проекта */
.mt-proj-tabs {
display: flex;
gap: 6px;
padding: 4px 0 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid var(--m-sep);
margin-bottom: 12px;
/* m130e-fix: подравнять с остальным контентом sheet — без выезда вправо */
margin-left: 0;
margin-right: 0;
justify-content: flex-start;
scroll-padding-left: 0;
}
.mt-proj-tabs::-webkit-scrollbar { display: none; }
.mt-proj-tab {
flex: none;
padding: 7px 13px;
border: 1px solid var(--m-sep-2);
background: var(--m-bg-2);
color: var(--m-text-2);
border-radius: 20px;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.mt-proj-tab.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* m130c-A4: Хронология */
.mt-proj-timeline {
position: relative;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-top: 14px;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-proj-timeline::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-proj-timeline-lbl {
font-size: 10px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
margin-bottom: 12px;
}
.mt-proj-timeline-bar {
position: relative;
height: 8px;
background: var(--m-bg-3);
border-radius: 4px;
margin: 8px 0;
}
.mt-proj-timeline-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--m-acc-grad);
border-radius: 4px;
}
.mt-proj-timeline-now {
position: absolute;
top: -4px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--m-acc);
border: 3px solid var(--m-bg-2);
box-shadow: 0 0 8px var(--m-acc-glow);
transform: translateX(-50%);
}
.mt-proj-timeline-row {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--m-text-3);
margin-top: 4px;
}
.mt-proj-timeline-foot {
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--m-sep);
font-size: 11.5px;
color: var(--m-text-3);
line-height: 1.5;
}
/* m130c-A4: Светофор направлений 2×2 */
.mt-proj-streams-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* m200-Z13: «Вагоны проекта» — линейный список этапов сверху вниз.
По совещанию с Павловым 22.05: руководитель видит цель, прогресс, статус каждого вагона. */
.mt-wagons {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.mt-wagon {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 4px solid var(--m-sep-2);
border-radius: 12px;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.mt-wagon-head {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
cursor: pointer;
transition: background 0.1s ease;
}
.mt-wagon-head:active { background: var(--m-bg-3); }
.mt-wagon-arr {
flex: none;
margin-left: 4px;
font-size: 14px;
color: var(--m-text-3);
transition: transform 0.2s ease;
}
.mt-wagon.mt-wagon-open .mt-wagon-arr { transform: rotate(180deg); }
.mt-wagon-edit {
flex: none;
background: transparent;
border: 1px solid var(--m-sep-2);
border-radius: 6px;
width: 30px;
height: 28px;
padding: 0;
font-size: 13px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
margin-left: 4px;
}
.mt-wagon-edit:active { background: var(--m-bg-3); }
.mt-wagon-tasks {
border-top: 1px solid var(--m-sep);
background: var(--m-bg-1);
padding: 8px;
}
.mt-wagon-task {
display: flex;
gap: 8px;
align-items: center;
padding: 8px 10px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 8px;
margin-bottom: 6px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: 12.5px;
}
.mt-wagon-task:last-child { margin-bottom: 0; }
.mt-wagon-task:active { background: var(--m-bg-3); }
.mt-wagon-task-ico {
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
}
.mt-wagon-task-done .mt-wagon-task-ico { background: rgba(95,191,127,0.2); color: var(--m-ok); }
.mt-wagon-task-cancel .mt-wagon-task-ico { background: rgba(127,127,127,0.2); color: var(--m-text-3); }
.mt-wagon-task-overdue .mt-wagon-task-ico { background: rgba(232,117,75,0.2); color: var(--m-bad); }
.mt-wagon-task-work .mt-wagon-task-ico { background: rgba(127,174,207,0.2); color: var(--m-info); }
.mt-wagon-task-t {
flex: 1;
color: var(--m-text-1);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-wagon-task-done .mt-wagon-task-t { text-decoration: line-through; color: var(--m-text-3); }
.mt-wagon-task-who {
flex: none;
font-size: 11px;
color: var(--m-text-3);
font-weight: 600;
}
.mt-wagon-empty {
padding: 14px;
text-align: center;
color: var(--m-text-3);
font-size: 12.5px;
line-height: 1.5;
}
/* m200-Z16/П3: переключатель режимов «Проекты / Все вагоны» */
.mt-proj-mode-toggle {
display: flex;
gap: 6px;
margin: 0 0 12px;
padding: 4px;
background: var(--m-bg-3);
border-radius: 10px;
}
.mt-proj-mode {
flex: 1;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 7px;
color: var(--m-text-2);
font-size: 13px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s;
}
.mt-proj-mode.active {
background: var(--m-bg-2);
color: var(--m-text-1);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* m200-Z16/П3: сводный экран всех вагонов */
.mt-aw-group-h {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--m-text-3);
margin: 14px 0 6px;
padding: 0 4px;
}
.mt-aw-wagon {
display: flex;
gap: 10px;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 4px solid var(--m-sep-2);
border-radius: 10px;
margin-bottom: 6px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-aw-wagon:active { background: var(--m-bg-3); }
.mt-aw-num {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--m-bg-3);
color: var(--m-text-1);
font-size: 12px;
font-weight: 700;
display: grid;
place-items: center;
margin-top: 2px;
}
.mt-aw-body { flex: 1; min-width: 0; }
.mt-aw-t {
font-size: 13.5px;
font-weight: 700;
color: var(--m-text-1);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.mt-aw-light {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-left: auto;
}
.mt-aw-goal {
font-size: 11.5px;
color: var(--m-text-1);
background: var(--m-bg-3);
padding: 4px 7px;
border-radius: 5px;
margin: 3px 0;
line-height: 1.3;
}
.mt-aw-meta {
font-size: 11px;
color: var(--m-text-2);
margin-top: 3px;
}
/* m200-Z16/П2: строки выбора человека с поиском */
.mt-pp-row {
padding: 11px 14px;
border-bottom: 1px solid var(--m-sep);
font-size: 14px;
color: var(--m-text-1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-pp-row:active { background: var(--m-bg-3); }
.mt-pp-row.active { background: var(--m-acc-soft); font-weight: 700; }
.mt-pp-row:last-child { border-bottom: none; }
.mt-wagon-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--m-bg-3);
color: var(--m-text-1);
font-size: 14px;
font-weight: 800;
display: grid;
place-items: center;
margin-top: 2px;
}
.mt-wagon-body { flex: 1; min-width: 0; }
.mt-wagon-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mt-wagon-t {
flex: 1;
font-size: 15px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1.25;
}
.mt-wagon-light {
flex: none;
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.mt-wagon-goal {
font-size: 12.5px;
color: var(--m-text-1);
line-height: 1.4;
margin: 4px 0 6px;
padding: 6px 9px;
background: var(--m-bg-3);
border-radius: 6px;
}
.mt-wagon-goal-empty {
color: var(--m-text-3);
background: transparent;
padding: 0;
font-size: 11.5px;
}
.mt-wagon-lead, .mt-wagon-deadline {
font-size: 11.5px;
color: var(--m-text-2);
margin-top: 4px;
line-height: 1.35;
}
.mt-wagon-lead-empty { color: var(--m-text-3); }
.mt-wagon-prog-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.mt-wagon-prog {
flex: 1;
height: 6px;
background: var(--m-bg-3);
border-radius: 3px;
overflow: hidden;
}
.mt-wagon-prog-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.mt-wagon-prog-txt {
font-size: 11px;
color: var(--m-text-2);
font-weight: 600;
flex: none;
white-space: nowrap;
}
.mt-wagon-add {
background: transparent;
border: 2px dashed var(--m-sep-2);
border-left: 2px dashed var(--m-sep-2);
}
.mt-wagon-add .mt-wagon-add-t {
font-size: 13px;
font-weight: 700;
color: var(--m-text-3);
padding: 6px 0;
}
.mt-proj-stream-card {
position: relative;
padding: 11px 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-proj-stream-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-proj-stream-h {
display: flex; align-items: center; gap: 7px;
}
.mt-proj-stream-ic {
width: 26px; height: 26px;
border-radius: 8px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 13px;
border: 1px solid rgba(224,168,92,0.20);
flex: none;
}
.mt-proj-stream-t {
font-size: 12.5px;
font-weight: 700;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-proj-stream-prog {
margin-top: 8px;
height: 4px;
background: var(--m-bg-3);
border-radius: 2px;
overflow: hidden;
}
.mt-proj-stream-prog-bar { height: 100%; }
.mt-proj-stream-meta {
font-size: 10.5px;
color: var(--m-text-3);
margin-top: 6px;
}
/* m130f-A5.2: плашка «+ Добавить направление» — пунктирная, медная */
.mt-proj-stream-add {
background: transparent !important;
border: 1px dashed var(--m-acc) !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 92px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease;
}
.mt-proj-stream-add::before { display: none; }
.mt-proj-stream-add:active {
background: var(--m-acc-soft) !important;
}
.mt-proj-stream-add-ic {
font-size: 26px;
color: var(--m-acc);
font-weight: 300;
line-height: 1;
}
.mt-proj-stream-add-t {
font-size: 11px;
font-weight: 700;
color: var(--m-acc);
text-align: center;
line-height: 1.3;
}
/* m130c-A4: Команда — карусель аватаров */
.mt-proj-team {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 0 4px;
}
.mt-proj-team::-webkit-scrollbar { display: none; }
.mt-proj-av {
flex: none;
width: 56px;
text-align: center;
position: relative;
}
.mt-proj-av-pic {
width: 46px; height: 46px;
border-radius: 50%;
margin: 0 auto;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 14px;
font-weight: 800;
color: var(--m-acc);
border: 1px solid rgba(224,168,92,0.25);
}
.mt-proj-av-name {
font-size: 10px;
color: var(--m-text-3);
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-proj-av-badge {
position: absolute;
top: -2px; right: 4px;
min-width: 18px;
height: 18px;
border-radius: 9px;
padding: 0 5px;
background: var(--m-acc);
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 18px;
text-align: center;
border: 2px solid var(--m-bg-1);
}
.mt-proj-av-badge.bad { background: var(--m-bad); }
.mt-proj-av-badge.ok { background: var(--m-ok); }
/* m130c-A4: Направления — колонки (горизонтальный скролл) */
.mt-proj-streams-cols {
display: flex;
gap: 11px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 4px 0 8px;
margin-right: calc(-1 * var(--m-pad));
}
.mt-proj-streams-cols::-webkit-scrollbar { display: none; }
.mt-proj-stream-col {
position: relative;
flex: none;
width: 250px;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-proj-stream-col::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-proj-stream-col-h {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.mt-proj-stream-col-ic {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 14px;
border: 1px solid rgba(224,168,92,0.20);
flex: none;
}
.mt-proj-stream-col-t {
font-size: 13px; font-weight: 800; flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-proj-stream-col-lead {
font-size: 11px; color: var(--m-text-3); margin-bottom: 6px;
}
.mt-proj-stream-col-lead b { color: var(--m-text-1); font-weight: 700; }
.mt-proj-stream-col-stat {
font-size: 11px; color: var(--m-text-3); margin-bottom: 8px;
}
.mt-proj-stream-col-empty {
font-size: 11px; color: var(--m-text-3);
font-style: italic;
text-align: center;
padding: 14px 0;
border-top: 1px dashed var(--m-sep);
border-bottom: 1px dashed var(--m-sep);
margin-bottom: 8px;
}
/* m200-A5.4: кнопка «+ задача в направление» — активная, медная пунктирная */
.mt-proj-add-task {
width: 100%;
padding: 10px;
background: transparent;
color: var(--m-acc);
border: 1px dashed var(--m-acc);
border-radius: 9px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .15s ease;
}
.mt-proj-add-task:active { background: var(--m-acc-soft); }
.mt-proj-add-task[disabled] {
color: var(--m-text-3);
border-color: var(--m-sep-2);
cursor: not-allowed;
opacity: 0.6;
}
/* m200-A5.4: контейнер задач внутри колонки направления */
.mt-proj-stream-tasks {
margin-bottom: 9px;
}
.mt-proj-task-card {
padding: 10px;
margin-bottom: 7px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, border-color .15s ease;
}
.mt-proj-task-card:active { transform: scale(0.98); border-color: var(--m-acc); }
.mt-proj-task-t {
font-size: 12.5px;
font-weight: 700;
color: var(--m-text-1);
line-height: 1.35;
}
.mt-proj-task-meta {
display: flex; gap: 7px;
align-items: center; flex-wrap: wrap;
margin-top: 6px;
font-size: 10.5px;
color: var(--m-text-3);
}
.mt-proj-task-st {
padding: 2px 7px;
border-radius: 6px;
font-weight: 800;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mt-proj-task-st-todo { background: rgba(127,174,207,0.16); color: var(--m-info); }
.mt-proj-task-st-run { background: rgba(224,168,92,0.16); color: var(--m-acc); }
.mt-proj-task-st-review { background: rgba(127,174,207,0.16); color: var(--m-info); }
.mt-proj-task-st-done { background: rgba(95,191,127,0.16); color: var(--m-ok); }
.mt-proj-task-st-late { background: rgba(208,90,90,0.16); color: var(--m-bad); }
.mt-proj-task-who {
margin-left: auto;
}
/* m200-B4-4: плашка направления у задачи совещания */
.mt-proj-task-stream {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 8px;
background: rgba(224,168,92,0.12);
color: var(--m-acc);
border: 1px solid rgba(224,168,92,0.3);
font-size: 11.5px;
font-weight: 600;
}
/* m130c-A4: Заглушка вкладки (для Совещаний) */
.mt-proj-soon {
padding: 30px 16px;
text-align: center;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
margin-top: 10px;
}
.mt-proj-soon-ic {
font-size: 36px;
margin-bottom: 10px;
opacity: 0.7;
}
.mt-proj-soon-t {
font-size: 14px;
font-weight: 800;
color: var(--m-text-1);
margin-bottom: 6px;
}
.mt-proj-soon-s {
font-size: 12px;
color: var(--m-text-3);
line-height: 1.5;
}
/* m130c-A4: Фильтр ролей на «Люди» */
.mt-proj-roles {
display: flex;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 0 0 11px;
}
.mt-proj-roles::-webkit-scrollbar { display: none; }
.mt-proj-role-chipbtn {
flex: none;
padding: 6px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 14px;
color: var(--m-text-2);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.mt-proj-role-chipbtn.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* m130l-B3: карточка совещания в проекте */
.mt-proj-meet-card {
position: relative;
padding: 12px 14px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
margin-bottom: 10px;
cursor: pointer;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-proj-meet-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--m-acc-grad);
}
.mt-proj-meet-card:active {
transform: scale(0.99);
border-color: var(--m-acc);
}
.mt-proj-meet-h {
display: flex; gap: 11px; align-items: flex-start;
}
.mt-proj-meet-ic {
width: 36px; height: 36px;
border-radius: 9px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 18px; flex: none;
border: 1px solid rgba(224,168,92,0.25);
}
.mt-proj-meet-t {
font-size: 14px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1.3;
}
.mt-proj-meet-date {
font-size: 11.5px;
color: var(--m-text-3);
margin-top: 3px;
}
.mt-proj-meet-org {
font-size: 11.5px;
color: var(--m-text-3);
margin-top: 3px;
}
.mt-proj-meet-org b { color: var(--m-text-1); font-weight: 700; }
.mt-proj-meet-proto {
margin-top: 10px;
padding: 8px 10px;
border-radius: 9px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 7px;
}
.mt-proj-meet-proto.ok {
background: rgba(95,191,127,0.10);
border: 1px solid rgba(95,191,127,0.25);
color: var(--m-ok);
}
.mt-proj-meet-proto.warn {
background: rgba(210,149,74,0.10);
border: 1px solid rgba(210,149,74,0.30);
color: var(--m-warn);
}
.mt-proj-meet-meta {
margin-top: 8px;
font-size: 11.5px;
color: var(--m-text-3);
}
.mt-proj-meet-meta b {
color: var(--m-text-1);
font-weight: 700;
}
/* m130h-A5.3: «+ Добавить участника» — медная кнопка на всю ширину */
.mt-proj-add-member-btn {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 12px;
background: var(--m-acc-grad);
color: #fff;
border: none;
border-radius: var(--m-r-m);
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 4px 14px var(--m-acc-glow);
-webkit-tap-highlight-color: transparent;
}
.mt-proj-add-member-btn:active { transform: scale(0.99); }
/* Кнопка «🗑» у строки участника */
.mt-proj-mem-menu {
margin-left: 8px;
width: 32px; height: 32px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--m-sep-2);
color: var(--m-text-3);
font-size: 15px;
cursor: pointer;
display: grid; place-items: center;
flex: none;
-webkit-tap-highlight-color: transparent;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mt-proj-mem-menu:active {
background: rgba(208,90,90,0.10);
border-color: var(--m-bad);
color: var(--m-bad);
}
/* Пилюли выбора роли в форме «+ Новый участник» */
.mt-proj-role-picker {
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.mt-proj-role-pick {
flex: 1;
min-width: 100px;
padding: 10px 12px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
color: var(--m-text-2);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mt-proj-role-pick.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
.mt-proj-role-pick:active { transform: scale(0.97); }
/* Доп.строка статистики у участника */
.mt-proj-mem-stats {
display: flex;
gap: 6px;
margin-top: 5px;
font-size: 10px;
flex-wrap: wrap;
}
.mt-proj-mem-stats span {
padding: 1px 6px;
border-radius: 5px;
background: var(--m-bg-3);
color: var(--m-text-2);
font-weight: 700;
}
.mt-proj-mem-stats span.run { background: rgba(224,168,92,0.15); color: var(--m-acc); }
.mt-proj-mem-stats span.ok { background: rgba(95,191,127,0.16); color: var(--m-ok); }
.mt-proj-mem-stats span.bad { background: rgba(208,90,90,0.16); color: var(--m-bad); }
/* m130c-A4: Аналитика — большие цифры */
.mt-proj-an-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.mt-proj-an-card {
position: relative;
padding: 14px 12px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: var(--m-r-m);
text-align: center;
overflow: hidden;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.14);
}
.mt-proj-an-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-proj-an-num {
font-size: 26px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1;
}
.mt-proj-an-lbl {
font-size: 10.5px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 700;
margin-top: 6px;
}
/* m130d-A5.1: Иконки-плашки выбора в форме создания проекта */
.mt-np-icons {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 7px;
justify-items: stretch;
}
.mt-np-icon {
aspect-ratio: 1 / 1;
width: 100%;
min-width: 0;
border-radius: 11px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
color: var(--m-text-1);
font-size: 20px;
cursor: pointer;
display: grid;
place-items: center;
padding: 0;
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.mt-np-icon:active { transform: scale(0.94); }
.mt-np-icon.active {
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft);
background: var(--m-bg-2);
}
/* Подпись выбранной иконки — что это значит */
.mt-np-icon-name {
margin-top: 8px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: var(--m-acc);
letter-spacing: 0.2px;
}
/* m130f-fix: textarea с автовысотой для длинных названий и целей */
.mt-np-grow {
width: 100%;
resize: none;
overflow: hidden;
min-height: 42px;
max-height: 220px;
line-height: 1.4;
font-size: 14px;
padding: 11px 12px;
}
#mt-np-title.mt-np-grow {
font-weight: 700;
font-size: 15px;
}
/* m130c-A4: События истории */
.mt-proj-event {
display: flex;
gap: 11px;
padding: 11px 0;
border-bottom: 1px solid var(--m-sep);
}
.mt-proj-event:last-child { border-bottom: none; }
.mt-proj-event-ic {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--m-bg-3);
display: grid; place-items: center;
font-size: 14px;
flex: none;
}
.mt-proj-event-body {
flex: 1;
font-size: 12.5px;
color: var(--m-text-2);
line-height: 1.45;
}
.mt-proj-event-body b { color: var(--m-text-1); font-weight: 700; }
.mt-proj-event-when {
font-size: 10.5px;
color: var(--m-text-3);
margin-top: 3px;
}
/* Push-to-talk экран */
.mt-idea-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 4px 0;
}
.mt-idea-status {
font-size: 12.5px;
color: var(--m-text-2);
text-align: center;
font-weight: 600;
min-height: 18px;
}
/* m122h: тот же медный градиент что у mt-fast-mic — везде одинаково */
.mt-idea-mic {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--m-acc-grad);
border: none;
color: #fff;
font-size: 40px;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 6px 22px var(--m-acc-glow);
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
transition: transform .15s, box-shadow .15s;
}
.mt-idea-mic.rec {
background: var(--m-bad);
box-shadow: 0 0 0 8px rgba(232,117,117,0.25), 0 8px 28px rgba(232,117,117,0.5);
animation: m-pulse 1.1s ease-in-out infinite;
transform: scale(1.05);
}
.mt-idea-hint {
font-size: 11.5px;
color: var(--m-text-3);
text-align: center;
padding: 0 16px;
line-height: 1.4;
}
.mt-idea-or {
font-size: 11px;
color: var(--m-text-3);
text-align: center;
padding: 2px 0 0;
}
.mt-idea-text {
width: 100%;
min-height: 80px;
max-height: 220px;
padding: 11px 13px;
background: var(--m-bg-2);
border: 2px solid rgba(224,168,92,0.45);
border-radius: 11px;
font-size: 14px;
color: var(--m-text-1);
line-height: 1.5;
font-family: inherit;
resize: vertical;
}
.mt-idea-text:focus {
outline: none;
border-color: #E0A85C;
box-shadow: 0 0 0 3px rgba(224,168,92,0.2);
}
/* Экран «сохранено + категории» */
.mt-idea-saved {
padding: 14px 16px;
background: linear-gradient(135deg, var(--m-ok-bg, rgba(110,168,137,0.16)), rgba(110,168,137,0.04));
border: 1px solid var(--m-ok-line, rgba(110,168,137,0.4));
border-radius: 12px;
display: grid;
grid-template-columns: auto 1fr;
gap: 0 12px;
align-items: center;
}
.mt-idea-saved-ico {
grid-row: 1 / 3;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--m-ok);
color: #fff;
display: grid;
place-items: center;
font-size: 18px;
font-weight: 800;
}
.mt-idea-saved-t {
font-size: 13.5px;
font-weight: 800;
color: var(--m-ok);
}
.mt-idea-saved-s {
font-size: 12px;
color: var(--m-text-2);
line-height: 1.4;
margin-top: 2px;
}
.mt-idea-cat-h {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 800;
margin: 12px 0 6px;
}
.mt-idea-cats {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.mt-idea-cat {
padding: 8px 13px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 99px;
color: var(--m-text-2);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-idea-cat:active { transform: scale(0.96); }
.mt-idea-cat.sel {
background: linear-gradient(180deg, #E0A85C, #B8853E);
border-color: #B8853E;
color: #fff;
}
.mt-idea-cat.personal {
background: rgba(224,168,92,0.10);
border-color: rgba(224,168,92,0.4);
color: #E0A85C;
}
.mt-idea-cat.personal.sel {
background: linear-gradient(180deg, #E0A85C, #B8853E);
color: #fff;
}
.mt-idea-cat.add {
border-style: dashed;
color: var(--m-acc);
border-color: var(--m-acc);
background: transparent;
}
/* ─── Баннер «Разрешите микрофон» ─── */
.m-mic-prewarm {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
background: linear-gradient(135deg, rgba(127,174,207,0.12), rgba(127,174,207,0.04));
border: 1px solid rgba(127,174,207,0.4);
border-radius: 11px;
}
.m-mic-prewarm-ico {
width: 36px;
height: 36px;
border-radius: 9px;
background: rgba(127,174,207,0.16);
border: 1px solid rgba(127,174,207,0.45);
display: grid;
place-items: center;
font-size: 18px;
flex: none;
}
.m-mic-prewarm-txt {
flex: 1;
min-width: 0;
}
.m-mic-prewarm-t {
font-size: 12.5px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1.2;
}
.m-mic-prewarm-s {
font-size: 10.5px;
color: var(--m-text-3);
margin-top: 2px;
line-height: 1.3;
}
.m-mic-prewarm-btn {
padding: 8px 14px;
background: var(--m-acc-grad);
color: #fff;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
flex: none;
}
.m-mic-prewarm-btn:active { transform: scale(0.96); }
.m-mic-prewarm-x {
width: 26px;
height: 26px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--m-text-3);
font-size: 14px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
flex: none;
}
.m-mic-prewarm-x:active { color: var(--m-text-1); }
/* ═══════════════════════════════════════════════════════════
🏷 МАРКЕРЫ РЕЖИМА КАРТЫ + БАННЕР ПРИЁМКИ (Этап 3 v3)
═══════════════════════════════════════════════════════════ */
/* Переключатель режима карты в форме создания */
.mt-rm-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
/* ─── Переключатель типа задачи (Простая / Составная) ─── */
.mt-type-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* m200-Z99: единый стиль с .m-pri-btn (эталон «Приоритет»):
высота 42px, скругление var(--m-r-m), активный — медный градиент с белым текстом и glow */
.mt-type-chip {
height: 42px;
padding: 0 10px;
display: grid;
place-items: center;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
color: var(--m-text-2);
font-size: 13px;
font-weight: 600;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
user-select: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.mt-type-chip.active {
background: var(--m-acc-grad);
border-color: var(--m-acc);
color: #fff;
font-weight: 700;
box-shadow:
0 0 0 2px var(--m-acc-soft),
0 4px 14px var(--m-acc-glow),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.mt-type-chip:active { transform: scale(0.96); }
.mt-type-hint {
font-size: 11px;
color: var(--m-text-3);
margin-top: 6px;
line-height: 1.4;
}
/* ─── Пункты составной задачи ─── */
.mt-subtask-row {
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 10px;
}
.mt-subtask-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mt-subtask-n {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--m-acc);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 11px;
}
.mt-subtask-t {
font-size: 12px;
font-weight: 700;
color: var(--m-text-1);
flex: 1;
}
.mt-subtask-del {
width: 26px;
height: 26px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--m-sep-2);
color: var(--m-text-3);
font-size: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-subtask-del:active { background: var(--m-bad-bg, rgba(232,117,117,0.16)); color: var(--m-bad); border-color: var(--m-bad); }
.mt-subtask-title {
width: 100%;
padding: 8px 10px;
background: var(--m-bg-1);
border: 1px solid var(--m-sep-2);
border-radius: 7px;
color: var(--m-text-1);
font-size: 13px;
font-family: inherit;
}
.mt-subtask-title:focus { outline: none; border-color: var(--m-acc); }
/* m122h: жёстко круглый — никакого овала от flex/inline-стилей */
.mt-subtask-mic {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 32px !important;
height: 32px !important;
min-width: 32px;
min-height: 32px;
max-width: 32px;
max-height: 32px;
flex: none;
aspect-ratio: 1 / 1;
border-radius: 50%;
border: none;
background: var(--m-acc-grad);
color: #fff;
padding: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 4px var(--m-acc-glow);
display: grid;
place-items: center;
box-sizing: content-box;
}
.mt-subtask-mic:active { transform: translateY(-50%) scale(0.95); }
/* m122i: при записи — красный + пульсация, но КУРСОР НЕ СДВИГАЕТСЯ */
.mt-subtask-mic.rec,
#mt-mic-title.rec{
background: var(--m-bad) !important;
animation: mt-mic-pulse-fix 1.2s ease-in-out infinite;
}
@keyframes mt-mic-pulse-fix{
0%,100%{ transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(232,117,117,0.5); }
50% { transform: translateY(-50%) scale(1.06); box-shadow: 0 0 0 6px rgba(232,117,117,0); }
}
/* ─── Карточка составной задачи (список пунктов + прогресс) ─── */
.mt-sub-bar {
height: 6px;
border-radius: 99px;
background: var(--m-bg-3);
overflow: hidden;
margin-bottom: 10px;
}
.mt-sub-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--m-acc), var(--m-ok));
transition: width .4s ease;
}
.mt-sub-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mt-sub-card {
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 9px;
}
/* m108: блок дорожной карты внутри карточки подзадачи */
.mt-sub-roadmap {
margin-top: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--m-sep);
border-radius: 7px;
}
.mt-sub-roadmap-h {
font-size: 10.5px;
font-weight: 800;
color: var(--m-text-2);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
.mt-sub-roadmap-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.mt-sub-step {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
font-size: 12px;
line-height: 1.3;
color: var(--m-text-2);
}
.mt-sub-step-ico {
flex: none;
width: 14px;
text-align: center;
font-weight: 800;
color: var(--m-text-3);
}
.mt-sub-step-t {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-sub-step-d {
flex: none;
font-size: 11px;
color: var(--m-text-3);
font-weight: 600;
}
.mt-sub-step.done .mt-sub-step-ico { color: var(--m-ok); }
.mt-sub-step.done .mt-sub-step-t { color: var(--m-text-3); text-decoration: line-through; }
.mt-sub-step.work .mt-sub-step-ico { color: var(--m-acc); }
.mt-sub-step.work .mt-sub-step-t { color: var(--m-text-1); font-weight: 600; }
.mt-sub-step.bad .mt-sub-step-ico { color: var(--m-bad); }
.mt-sub-step.bad .mt-sub-step-t { color: var(--m-bad); }
.mt-sub-roadmap-mini {
margin-top: 8px;
padding: 5px 8px;
background: rgba(255,255,255,0.02);
border: 1px dashed var(--m-sep-2);
border-radius: 6px;
font-size: 11px;
color: var(--m-text-3);
font-weight: 600;
}
.mt-sub-card.mine {
border-color: var(--m-acc);
background: var(--m-acc-soft);
}
.mt-sub-card.done {
opacity: 0.7;
background: var(--m-ok-bg, rgba(110,168,137,0.08));
border-color: var(--m-ok-line, rgba(110,168,137,0.4));
}
.mt-sub-card.mt-sub-clickable {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .12s, border-color .12s;
}
.mt-sub-card.mt-sub-clickable:active { transform: scale(0.98); }
/* Список выбора соисполнителя (Этап 6) */
.mt-co-pick-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.mt-co-pick {
padding: 11px 14px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 9px;
color: var(--m-text-1);
font-size: 13px;
font-weight: 700;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-co-pick:active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
transform: scale(0.98);
}
/* ─── Расширенные плашки категорий (Этап 7 · П.13) ─── */
.m-cats-rich {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 0 var(--m-pad) var(--m-gap);
}
.m-cat-rich {
padding: 10px 11px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 11px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Плашки категорий — нейтральные, без медной заливки */
.m-cat-rich.has-tasks { border-color: var(--m-sep-2); background: var(--m-bg-2); }
.m-cat-head {
display: flex;
align-items: center;
gap: 7px;
}
.m-cat-rich .m-cat-ico { font-size: 17px; }
.m-cat-rich .m-cat-l { flex: 1; font-size: 11.5px; font-weight: 700; color: var(--m-text-1); line-height: 1.2; }
.m-cat-rich .m-cat-v {
font-family: var(--font-display, inherit);
font-size: 16px;
font-weight: 800;
color: var(--m-acc);
}
.m-cat-rich:not(.has-tasks) .m-cat-v { color: var(--m-text-3); }
.m-cat-sub {
font-size: 10.5px;
margin-top: 6px;
display: flex;
gap: 9px;
flex-wrap: wrap;
color: var(--m-text-3);
}
.m-cat-bad { color: var(--m-bad); font-weight: 700; }
.m-cat-warn { color: var(--m-warn); font-weight: 700; }
/* Раскрытие распределения по людям внутри плашки категории */
.m-cat-people {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--m-sep-2);
display: flex;
flex-direction: column;
gap: 5px;
}
.m-cat-empty {
font-size: 10.5px;
color: var(--m-text-3);
text-align: center;
padding: 5px 0;
}
.m-cat-prow {
position: relative;
padding: 6px 8px;
background: var(--m-bg-3);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
}
.m-cat-prow:active { background: var(--m-bg-4); }
.m-cat-pbar {
position: absolute;
inset: 0;
background: transparent;
}
.m-cat-pbar-fill {
height: 100%;
background: rgba(210,106,26,0.18);
border-right: 1px solid rgba(210,106,26,0.5);
}
.m-cat-prow-text {
position: relative;
font-size: 11px;
color: var(--m-text-1);
font-weight: 700;
}
.m-cat-pcount {
margin-left: 6px;
padding: 1px 7px;
background: var(--m-bg-2);
border-radius: 99px;
font-size: 10px;
color: var(--m-text-2);
}
/* ─── Карточки людей (Этап 7 · П.12) ─── */
.mt-ppl-card {
padding: 12px 14px;
margin: 0 var(--m-pad) 10px;
background: var(--m-bg-2);
border: 1px solid var(--m-acc);
border-radius: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 6px var(--m-acc-glow);
}
.mt-ppl-card:active { transform: scale(0.99); }
.mt-ppl-h {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.mt-ppl-name {
flex: 1;
font-size: 14px;
font-weight: 800;
color: var(--m-text-1);
}
.mt-ppl-pos {
font-size: 10.5px;
color: var(--m-text-3);
font-weight: 500;
margin-top: 2px;
/* m100: должность — одной строкой, обрезаем многоточием если не влезает */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.mt-ppl-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.mt-ppl-stat {
padding: 7px 4px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep-2);
border-radius: 8px;
text-align: center;
}
.mt-ppl-stat-v {
font-family: var(--font-display, inherit);
font-size: 17px;
font-weight: 800;
color: var(--m-text-1);
line-height: 1;
}
.mt-ppl-stat-l {
font-size: 9.5px;
color: var(--m-text-3);
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 700;
}
.mt-ppl-cats {
margin-top: 6px;
padding-top: 8px;
border-top: 1px dashed var(--m-sep-2);
display: flex;
flex-direction: column;
gap: 4px;
}
.mt-ppl-cat-row {
display: flex;
justify-content: space-between;
font-size: 11.5px;
}
.mt-ppl-cat-l { color: var(--m-text-2); }
.mt-ppl-cat-v { color: var(--m-text-1); font-weight: 700; }
.mt-sub-h {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 5px;
}
.mt-sub-n {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--m-acc);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 10px;
flex: none;
}
.mt-sub-ppl {
font-size: 11.5px;
font-weight: 700;
color: var(--m-text-1);
flex: 1;
}
.mt-sub-me {
display: inline-block;
padding: 1px 6px;
margin-left: 5px;
background: var(--m-acc);
color: #fff;
border-radius: 99px;
font-size: 9px;
font-weight: 800;
}
.mt-sub-st {
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 99px;
border: 1px solid;
}
.mt-sub-st.new {
background: var(--m-info-bg, rgba(127,174,207,0.14));
color: var(--m-info, #7faecf);
border-color: rgba(127,174,207,0.5);
}
.mt-sub-st.work {
background: var(--m-warn-bg, rgba(210,149,74,0.16));
color: var(--m-warn);
border-color: rgba(210,149,74,0.5);
}
.mt-sub-st.ok {
background: var(--m-ok-bg, rgba(110,168,137,0.18));
color: var(--m-ok);
border-color: rgba(110,168,137,0.5);
}
.mt-sub-st.cancel {
background: var(--m-bg-3);
color: var(--m-text-3);
border-color: var(--m-sep-2);
}
.mt-sub-title {
font-size: 13px;
color: var(--m-text-1);
line-height: 1.4;
margin-top: 3px;
}
.mt-sub-due {
font-size: 10.5px;
color: var(--m-text-3);
margin-top: 5px;
}
.mt-sub-actions {
display: flex;
gap: 6px;
margin-top: 9px;
}
.mt-sub-btn {
flex: 1;
padding: 8px 10px;
border-radius: 7px;
border: none;
font-size: 12px;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-sub-btn.primary {
background: var(--m-acc-grad);
color: #fff;
box-shadow: 0 2px 6px var(--m-acc-glow);
}
.mt-sub-btn:active { transform: scale(0.97); }
.mt-subtask-row select, .mt-subtask-row input[type="date"] {
padding: 8px 10px;
background: var(--m-bg-1);
border: 1px solid var(--m-sep-2);
border-radius: 7px;
color: var(--m-text-1);
font-size: 12.5px;
font-family: inherit;
min-width: 0;
}
.mt-add-subtask {
width: 100%;
margin-top: 8px;
padding: 10px;
background: transparent;
border: 1px dashed var(--m-acc);
border-radius: 9px;
color: var(--m-acc);
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
}
.mt-add-subtask:active { background: var(--m-acc-soft); }
/* m200-Z99: единый стиль с .m-pri-btn (эталон «Приоритет») */
.mt-rm-chip {
height: 42px;
padding: 0 6px;
display: grid;
place-items: center;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: var(--m-r-m);
color: var(--m-text-2);
font-size: 12px;
font-weight: 600;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
line-height: 1.2;
user-select: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.mt-rm-chip.active {
background: var(--m-acc-grad);
border-color: var(--m-acc);
color: #fff;
font-weight: 700;
box-shadow:
0 0 0 2px var(--m-acc-soft),
0 4px 14px var(--m-acc-glow),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.mt-rm-chip:active { transform: scale(0.96); }
.mt-rm-hint {
font-size: 11px;
color: var(--m-text-3);
margin-top: 6px;
line-height: 1.4;
}
/* Плашка-маркер режима карты в карточке задачи */
.mt-mk {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 10px;
border-radius: 13px;
font-size: 11px;
font-weight: 700;
border: 1px solid;
white-space: nowrap;
}
.mt-mk-map {
background: rgba(127,174,207,0.14);
color: #7faecf;
border-color: rgba(127,174,207,0.4);
}
.mt-mk-nomap {
background: var(--m-bg-3);
color: var(--m-text-2);
border-color: var(--m-sep-2);
}
.mt-mk-maybe {
background: var(--m-bg-3);
color: var(--m-text-3);
border-color: var(--m-sep-2);
}
/* Большой баннер «задача выполнена — нужна приёмка» */
.mt-accept-banner {
margin: 16px 0 14px;
padding: 13px 14px;
background: linear-gradient(135deg, rgba(110,168,137,0.16), rgba(110,168,137,0.05));
border: 2px solid var(--m-ok);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(110,168,137,0.18);
/* m97.1: контейнер должен сжиматься, длинные слова — переноситься */
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Если баннер приёмки — самый первый элемент в карточке (нет dueShiftBanner перед ним),
добавим больше воздуха сверху чтобы верхняя граница не прилипала к шапке sheet'а */
.m-sheet-body > .mt-accept-banner:first-child,
.m-sheet-body > div > .mt-accept-banner:first-child {
margin-top: 18px !important;
}
.mt-accept-h {
display: flex;
align-items: center;
gap: 11px;
}
.mt-accept-ico {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--m-ok);
color: #fff;
display: grid;
place-items: center;
font-size: 19px;
font-weight: 800;
flex: none;
}
.mt-accept-t {
font-size: 13.5px;
font-weight: 800;
color: var(--m-ok);
line-height: 1.25;
}
.mt-accept-s {
font-size: 11.5px;
color: var(--m-text-2);
margin-top: 2px;
line-height: 1.3;
}
.mt-accept-btns {
display: flex;
gap: 8px;
margin-top: 11px;
}
.mt-accept-btns button {
flex: 1;
padding: 11px 10px;
border-radius: 9px;
border: none;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-accept-yes {
background: var(--m-ok);
color: #fff;
box-shadow: 0 2px 8px rgba(110,168,137,0.4);
}
.mt-accept-yes:active { transform: scale(0.97); }
.mt-accept-back {
background: var(--m-bg-3);
color: var(--m-warn);
border: 1px solid rgba(210,149,74,0.45) !important;
}
.mt-accept-back:active { background: var(--m-warn-bg, rgba(210,149,74,0.16)); }
/* Фото-подтверждение в баннере приёмки */
.mt-accept-proof {
margin-top: 11px;
padding: 10px 11px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(110,168,137,0.35);
border-radius: 9px;
}
.mt-accept-proof-h {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--m-text-2);
margin-bottom: 7px;
}
.mt-accept-proof-img-wrap {
display: block;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mt-accept-proof-img {
display: block;
width: 100%;
max-height: 240px;
object-fit: cover;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.18);
}
.mt-accept-proof-file {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 8px;
font-size: 12.5px;
font-weight: 700;
color: var(--m-acc);
text-decoration: none;
}
/* m102: история прежних версий фото (аккордеон) */
.mt-accept-history {
margin-top: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(110,168,137,0.30);
border-radius: 9px;
overflow: hidden;
}
.mt-accept-history-h {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
font-size: 12px;
font-weight: 800;
color: var(--m-text-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-accept-history-h:active {
background: rgba(255,255,255,0.04);
}
.mt-accept-history-arr {
color: var(--m-text-3);
font-size: 14px;
transition: transform .15s ease;
}
.mt-accept-history-h.open .mt-accept-history-arr {
transform: rotate(90deg);
}
/* m105: блок «Уже есть похожее» под полем title в форме создания задачи */
/* m200-Z97: "Уже есть похожее" — единый стиль баннера-предупреждения.
Раньше был медно-оранжевый фон с тёмными плашками — не вписывался в общий стиль.
Теперь стандартная карточка с полосой сверху (.u-card is-warn-style) и крестик в стандартном круге. */
.mt-dup-block {
margin-top: 10px;
padding: 12px 14px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 12px;
position: relative;
overflow: hidden;
}
.mt-dup-block::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--m-warn);
border-radius: 12px 12px 0 0;
}
.mt-dup-head-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.mt-dup-h {
flex: 1;
font-size: 13px;
font-weight: 800;
color: var(--m-warn);
letter-spacing: 0.2px;
}
/* Стандартный круглый красный крестик — как везде в проекте */
.mt-dup-close {
flex: 0 0 28px !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box;
border-radius: 50% !important;
background: rgba(226, 85, 85, 0.18);
border: 1.5px solid rgba(226, 85, 85, 0.6);
color: #E25555;
font-size: 16px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}
.mt-dup-close:active {
transform: scale(0.92);
background: #E25555;
color: #fff;
}
.mt-dup-sub {
font-size: 10.5px;
font-weight: 800;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 8px 0 4px;
}
.mt-dup-grp {
display: flex;
flex-direction: column;
}
.mt-dup-row {
padding: 8px 10px;
margin: 4px 0;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-dup-row:active {
transform: scale(0.99);
background: var(--m-bg-3);
}
.mt-dup-row-t {
font-size: 12.5px;
font-weight: 700;
color: var(--m-text-1);
line-height: 1.3;
overflow-wrap: anywhere;
}
.mt-dup-id {
color: var(--m-text-3);
font-weight: 600;
}
.mt-dup-row-s {
font-size: 11px;
color: var(--m-text-3);
margin-top: 2px;
}
.mt-dup-foot {
font-size: 11px;
color: var(--m-text-2);
margin-top: 8px;
line-height: 1.4;
}
/* m130q: новый баннер «На доработке» с историей переписки и фото
Большой красный, чтобы исполнитель не пропустил. Два «пузыря»:
справа (медь) — постановщик, слева (синий) — исполнитель.
Все фото и файлы открываются в лайтбоксе. */
.mt-rework-banner {
margin: 0 0 14px;
padding: 14px 14px 12px;
background: linear-gradient(135deg, rgba(232,117,117,0.18), rgba(232,117,117,0.05));
border: 2px solid var(--m-bad);
border-radius: 14px;
box-shadow: 0 4px 16px rgba(232,117,117,0.18);
}
.mt-rework-h {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 11px;
}
.mt-rework-ico {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--m-bad);
color: #fff;
display: grid; place-items: center;
font-size: 20px;
font-weight: 800;
flex: none;
}
.mt-rework-t {
font-size: 14.5px;
font-weight: 800;
color: var(--m-bad);
line-height: 1.2;
}
.mt-rework-s {
font-size: 11.5px;
color: var(--m-text-3);
margin-top: 2px;
font-weight: 600;
}
.mt-rework-need {
padding: 10px 12px;
background: rgba(255,255,255,0.05);
border-left: 3px solid var(--m-bad);
border-radius: 6px 10px 10px 6px;
margin-bottom: 12px;
}
.mt-rework-need-l {
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--m-text-3);
margin-bottom: 4px;
}
.mt-rework-need-v {
font-size: 14px;
font-weight: 700;
color: var(--m-text-1);
line-height: 1.45;
}
/* m200-B5-Z3/П1: сворачиваемое описание задачи (длинные тексты > 250 символов).
По умолчанию класс .m-desc-open — показано полностью, кнопка «▴ Свернуть».
После toggle класс снимается — показывается короткий обрезок + кнопка «▾ Развернуть». */
.m-desc-wrap .m-desc-full,
.m-desc-wrap .m-desc-short,
.m-desc-wrap .m-desc-open-label,
.m-desc-wrap .m-desc-closed-label { display: none; }
.m-desc-wrap.m-desc-open .m-desc-full,
.m-desc-wrap.m-desc-open .m-desc-open-label { display: block; }
.m-desc-wrap:not(.m-desc-open) .m-desc-short,
.m-desc-wrap:not(.m-desc-open) .m-desc-closed-label { display: block; }
.m-desc-toggle {
padding: 8px 14px 10px;
font-size: 11.5px;
font-weight: 700;
color: var(--m-acc);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
border-top: 1px solid var(--m-sep);
margin-top: 6px;
text-align: center;
}
/* m200-B5-Z8: длинный TITLE задачи — сворачиваемый. По умолчанию открыт. */
.m-title-wrap .m-title-full,
.m-title-wrap .m-title-short,
.m-title-wrap .m-title-open-label,
.m-title-wrap .m-title-closed-label { display: none; }
.m-title-wrap.m-title-open .m-title-full,
.m-title-wrap.m-title-open .m-title-open-label { display: block; }
.m-title-wrap:not(.m-title-open) .m-title-short,
.m-title-wrap:not(.m-title-open) .m-title-closed-label { display: block; }
.m-title-toggle {
padding: 6px 0 0;
font-size: 12px;
font-weight: 700;
color: var(--m-acc);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
text-align: left;
margin-top: 6px;
}
/* m200-B5-P: блок «Файл от инициатора» — сворачиваемый, по умолчанию закрыт.
Лежит сразу после заголовка задачи, до whoBlock. */
.mt-attach-wrap > summary {
list-style: none;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
gap: 8px;
}
.mt-attach-wrap > summary::-webkit-details-marker { display: none; }
.mt-attach-summary > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-attach-arr {
color: var(--m-text-3);
font-size: 12px;
transition: transform 0.18s ease;
flex: none;
}
/* m200-Z204: поворот контейнера убран — теперь крутим ::before (см. ниже в Z169 блоке) */
/* m200-B5-O: история попыток в баннере доработки — сворачиваемая ().
По умолчанию закрыта, тап по плашке раскрывает. */
.mt-rework-hist-wrap {
margin-bottom: 11px;
}
.mt-rework-hist-wrap > summary {
list-style: none; /* убираем стандартный треугольник */
cursor: pointer;
padding: 8px 12px;
background: var(--m-bg-3);
border: 1px dashed var(--m-sep-2);
border-radius: 8px;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
gap: 8px;
}
.mt-rework-hist-wrap > summary::-webkit-details-marker { display: none; }
.mt-rework-hist-arr {
margin-left: auto;
color: var(--m-text-3);
font-size: 12px;
transition: transform 0.18s ease;
display: inline-block;
}
.mt-rework-hist-wrap[open] .mt-rework-hist-arr {
transform: rotate(90deg);
}
.mt-rework-hist-h {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--m-text-3);
margin: 0;
}
.mt-rework-hist {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
margin-bottom: 0;
max-height: 460px;
overflow-y: auto;
padding-right: 2px;
}
.mt-rework-row {
display: flex;
width: 100%;
}
.mt-rework-mgr { justify-content: flex-end; } /* постановщик — справа */
.mt-rework-wk { justify-content: flex-start; } /* исполнитель — слева */
.mt-rework-bubble {
max-width: 86%;
padding: 9px 11px;
border-radius: 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.mt-rework-mgr .mt-rework-bubble {
background: rgba(224,168,92,0.12);
border-color: rgba(224,168,92,0.30);
border-bottom-right-radius: 4px;
}
.mt-rework-wk .mt-rework-bubble {
background: rgba(127,174,207,0.10);
border-color: rgba(127,174,207,0.30);
border-bottom-left-radius: 4px;
}
.mt-rework-bubble-h {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 5px;
}
.mt-rework-side-tag {
padding: 2px 7px;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mt-rework-side-tag-mgr {
background: var(--m-acc);
color: #fff;
}
.mt-rework-side-tag-wk {
background: var(--m-info, #7faecf);
color: #fff;
}
.mt-rework-bubble-when {
font-size: 10.5px;
color: var(--m-text-3);
font-weight: 600;
}
.mt-rework-bubble-msg {
font-size: 12.5px;
color: var(--m-text-1);
line-height: 1.4;
margin-bottom: 6px;
white-space: pre-wrap;
word-break: break-word;
}
.mt-rework-bubble-att {
font-size: 10px;
color: var(--m-text-3);
font-weight: 700;
margin-top: 6px;
text-align: right;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mt-rework-media {
display: block;
margin-top: 4px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-rework-media img {
width: 100%;
max-height: 200px;
object-fit: cover;
display: block;
}
.mt-rework-file {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
margin-top: 4px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--m-sep);
border-radius: 8px;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.mt-rework-hint {
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px dashed var(--m-sep-2);
border-radius: 9px;
font-size: 11.5px;
line-height: 1.5;
color: var(--m-text-2);
}
.mt-rework-hint b { color: var(--m-acc); }
/* m103: блок «Что ты прикладывал раньше» в баннере возврата на доработку */
.mt-rework-prev {
margin-top: 10px;
padding: 10px 11px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(232,117,117,0.35);
border-radius: 9px;
}
.mt-rework-prev-h {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--m-text-2);
margin-bottom: 8px;
}
.mt-rework-prev-item {
padding: 7px 0;
border-top: 1px solid rgba(232,117,117,0.18);
}
.mt-rework-prev-item:first-of-type {
border-top: none;
padding-top: 0;
}
.mt-rework-prev-label {
font-size: 11px;
font-weight: 800;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.mt-rework-prev-note {
margin-top: 5px;
padding: 5px 8px;
background: rgba(255,255,255,0.04);
border-left: 2px solid var(--m-warn);
border-radius: 5px;
font-size: 12px;
color: var(--m-text-2);
line-height: 1.35;
}
/* Комментарий исполнителя в баннере приёмки */
.mt-accept-note {
margin-top: 10px;
padding: 9px 11px;
background: rgba(255,255,255,0.04);
border-left: 3px solid var(--m-ok);
border-radius: 7px;
/* m97.1: длинные слова без пробелов не должны ломать вёрстку */
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.mt-accept-note-h {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--m-text-2);
margin-bottom: 4px;
}
.mt-accept-note-body {
font-size: 13px;
color: var(--m-text-1);
line-height: 1.4;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Плашка «часы до принятия в работу» — диагностика задержек исполнителя */
.mt-ack-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 99px;
font-size: 11.5px;
font-weight: 700;
border: 1px solid;
white-space: nowrap;
}
.mt-ack-chip.fast { background: rgba(110,168,137,0.16); color: var(--m-ok); border-color: rgba(110,168,137,0.5); }
.mt-ack-chip.ok { background: var(--m-bg-3); color: var(--m-text-2); border-color: var(--m-sep-2); }
.mt-ack-chip.warn { background: rgba(210,149,74,0.18); color: var(--m-warn); border-color: rgba(210,149,74,0.55); }
.mt-ack-chip.bad { background: rgba(232,117,117,0.16); color: var(--m-bad); border-color: rgba(232,117,117,0.55); }
/* Быстрые кнопки сдвига срока: +1д / +3д / +неделя / +2 недели */
.mt-shift-quick {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 6px;
}
.mt-shift-q {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 12px 8px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep-2);
border-radius: 11px;
color: var(--m-text-1);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.mt-shift-q b {
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1px;
}
.mt-shift-q span {
font-size: 11.5px;
color: var(--m-text-3);
font-weight: 600;
}
.mt-shift-q:active {
transform: scale(0.97);
background: var(--m-bg-3);
}
.mt-shift-q.active {
background: rgba(210,149,74,0.18);
border-color: var(--m-warn);
}
.mt-shift-q.active b { color: var(--m-warn); }
.mt-shift-q.active span { color: var(--m-warn); opacity: 0.85; }
/* m111-extra: дисциплина по кадрам — сворачиваемый блок в Сводке */
.mt-disc-by-people {
border-top: 1px dashed var(--m-sep-2);
padding-top: 10px;
}
.mt-disc-by-people-h {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 4px;
font-size: 12.5px;
font-weight: 800;
color: var(--m-text-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-disc-by-people-h:active {
background: rgba(255,255,255,0.03);
}
.mt-disc-row {
padding: 9px 11px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 9px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-disc-row:active {
transform: scale(0.99);
background: var(--m-bg-3);
}
.mt-disc-row-h {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 6px;
}
.mt-disc-medal {
font-size: 15px;
flex: none;
}
.mt-disc-name {
flex: 1;
font-size: 13px;
font-weight: 700;
color: var(--m-text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-disc-val {
font-size: 14px;
font-weight: 800;
flex: none;
}
.mt-disc-bar {
height: 5px;
background: var(--m-bg-3);
border-radius: 99px;
overflow: hidden;
margin-bottom: 5px;
}
.mt-disc-bar-fill {
height: 100%;
border-radius: 99px;
transition: width .3s ease;
}
.mt-disc-meta {
font-size: 11px;
color: var(--m-text-3);
line-height: 1.4;
}
/* Баннер: запрос на перенос срока */
.mt-due-banner {
margin: 6px 0 12px;
padding: 13px 14px;
background: linear-gradient(135deg, rgba(210,149,74,0.18), rgba(210,149,74,0.06));
border: 2px solid var(--m-warn);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(210,149,74,0.18);
}
.mt-due-banner.waiting {
background: linear-gradient(135deg, rgba(127,174,207,0.14), rgba(127,174,207,0.04));
border-color: var(--m-info, #7faecf);
box-shadow: none;
}
.mt-due-h {
display: flex;
align-items: flex-start;
gap: 11px;
}
.mt-due-ico {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--m-warn);
color: #fff;
display: grid;
place-items: center;
font-size: 19px;
flex: none;
}
.mt-due-banner.waiting .mt-due-ico {
background: var(--m-info, #7faecf);
}
.mt-due-t {
font-size: 13.5px;
font-weight: 800;
color: var(--m-warn);
line-height: 1.25;
}
.mt-due-banner.waiting .mt-due-t {
color: var(--m-info, #7faecf);
}
/* m122o-P7: баннер «В переносе срока отказано» — красноватый, заметный.
Тон не «опасности», а «отказа»: тёплый коралл, чтобы исполнитель понял —
срок не двинут, выполняй или проси заново. */
.mt-due-banner--rejected {
background: linear-gradient(135deg, rgba(220, 90, 90, 0.18), rgba(220, 90, 90, 0.05));
border-color: #d05a5a;
box-shadow: 0 4px 14px rgba(208, 90, 90, 0.18);
}
.mt-due-banner--rejected .mt-due-ico {
background: #d05a5a;
}
.mt-due-banner--rejected .mt-due-t {
color: #d05a5a;
}
.mt-due-hint {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(208, 90, 90, 0.35);
font-size: 11px;
color: var(--m-text-3);
line-height: 1.4;
}
.mt-due-s {
font-size: 11.5px;
color: var(--m-text-2);
margin-top: 3px;
}
.mt-due-s b {
color: var(--m-text-1);
font-weight: 800;
}
.mt-due-reason {
font-size: 11.5px;
color: var(--m-text-2);
margin-top: 5px;
font-style: italic;
line-height: 1.4;
}
.mt-due-btns {
display: flex;
gap: 8px;
margin-top: 11px;
}
.mt-due-btns button {
flex: 1;
padding: 11px 10px;
border-radius: 9px;
border: none;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* m121-fix6: «Попросить перенести срок» — в стиле «Срок · Категория»:
тёмный фон карточки, медная полоска сверху, мягкое медное свечение,
текст обычного цвета. Никаких медных заливок. */
.mt-shift-due-btn {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
padding: 14px 16px;
background: var(--m-bg-2);
border: 1px solid rgba(210,106,26,0.30);
border-radius: 11px;
box-shadow: 0 0 0 1px var(--m-acc-soft), 0 4px 14px rgba(210,106,26,0.18);
color: var(--m-text-1);
font-family: inherit;
cursor: pointer;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.mt-shift-due-btn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--m-acc-grad);
}
.mt-shift-due-btn:active {
transform: scale(0.99);
border-color: var(--m-acc);
box-shadow: 0 0 0 2px var(--m-acc-soft), 0 6px 20px var(--m-acc-glow);
}
.mt-shift-due-ico {
font-size: 22px;
line-height: 1;
}
.mt-shift-due-t {
flex: 1;
text-align: left;
font-size: 14px;
font-weight: 700;
color: var(--m-text-1);
}
.mt-shift-due-arr {
font-size: 18px;
color: var(--m-text-3);
}
/* m122o-P1: заблокированная кнопка переноса срока — пока задача не принята.
Серый фон, без медной полоски, без свечения, курсор not-allowed. */
.mt-shift-due-btn--locked {
background: var(--m-bg-3);
border-color: var(--m-sep-2);
box-shadow: none;
cursor: not-allowed;
opacity: 0.85;
}
.mt-shift-due-btn--locked::before {
display: none;
}
.mt-shift-due-btn--locked:active {
transform: none;
border-color: var(--m-sep-2);
box-shadow: none;
}
.mt-shift-due-btn--locked .mt-shift-due-t {
color: var(--m-text-3);
font-weight: 600;
}
.mt-shift-due-btn--locked .mt-shift-due-ico {
filter: grayscale(0.6);
opacity: 0.7;
}
.mt-shift-due-locked-hint {
margin: -6px 0 12px;
padding: 0 4px;
font-size: 10.5px;
line-height: 1.4;
color: var(--m-text-3);
text-align: center;
}
/* m122o-P2: лайтбокс для вложений (фото/PDF) — открывается внутри окна,
правило feedback-no-new-tabs соблюдено. */
.mt-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* m200-B5-P: верхний отступ учитывает safe-area iOS — фото и крестик не уезжают под notch */
padding: max(72px, calc(env(safe-area-inset-top, 14px) + 64px)) 16px max(24px, env(safe-area-inset-bottom, 24px));
animation: mtLightboxFade 0.18s ease-out;
}
@keyframes mtLightboxFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* m200-Z85: красный круглый крестик с белой обводкой — виден на любом фоне (включая белый PDF/Excel) */
/* m200-Z106.Г: фирменный стиль крестика — единый по всему приложению.
Красная обводка, тёмно-красный фон, красный символ. Без белой обводки
(как было раньше) — синхронизирован с .m-sheet-close и другими крестиками закрытия. */
.mt-lightbox-close {
position: fixed;
top: max(16px, calc(env(safe-area-inset-top, 16px) + 10px));
right: 16px;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 50% !important;
border: 1.5px solid rgba(226, 85, 85, 0.6);
background: rgba(226, 85, 85, 0.18);
color: #E25555;
font-size: 24px;
font-weight: 800;
line-height: 1;
z-index: 10001;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
padding: 0;
}
.mt-lightbox-close:active {
transform: scale(0.92);
background: #E25555;
color: #fff;
}
.mt-lightbox-body {
width: 100%;
max-width: 720px;
display: flex;
align-items: center;
justify-content: center;
}
.mt-lightbox-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.mt-lightbox-iframe {
width: 100%;
height: 80vh;
border: none;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.mt-lightbox-fallback {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 32px 24px;
text-align: center;
max-width: 380px;
}
.mt-lightbox-dl {
display: inline-block;
padding: 10px 22px;
background: var(--m-acc-grad);
color: #fff;
font-weight: 700;
font-size: 14px;
border-radius: 10px;
text-decoration: none;
}
.mt-lightbox-name {
margin-top: 14px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Тонкий разделитель «остальное необязательно» в форме создания */
.m-field-sep {
margin: 6px 0 8px;
padding: 6px 10px;
font-size: 10.5px;
color: var(--m-text-3);
text-align: center;
border-top: 1px dashed var(--m-sep-2);
border-bottom: 1px dashed var(--m-sep-2);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
}
/* ─── Уведомления: переключатель Список/Группы (m89) ─────────── */
.mt-nt-tabs {
display: flex;
gap: 6px;
padding: 10px 0 12px;
position: sticky;
top: 0;
background: var(--m-bg-1);
z-index: 3;
}
.mt-nt-tab {
flex: 1;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep-2);
border-radius: 10px;
font-size: 13.5px;
font-weight: 800;
color: var(--m-text-2);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mt-nt-tab:active {
transform: scale(0.98);
}
.mt-nt-tab.active {
background: rgba(224,168,92,0.16);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* Плоский список (Список) — компактные карточки одним столбцом */
.mt-nt-list-flat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 0 6px;
}
/* ─── Уведомления: группы по причинам (m88) ──────────────────── */
.mt-nt-wrap {
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px 0 4px;
}
.mt-nt-group {
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 12px;
overflow: hidden;
}
.mt-nt-group-h {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 13px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background: var(--m-bg-2);
border-bottom: 1px solid transparent;
transition: background .14s ease;
}
.mt-nt-group-h:active {
background: var(--m-bg-3);
}
.mt-nt-group-h.open {
border-bottom-color: var(--m-sep-2);
}
.mt-nt-group-h.has-unread {
background: linear-gradient(180deg, color-mix(in srgb, var(--mt-nt-accent) 14%, transparent), var(--m-bg-2));
border-color: color-mix(in srgb, var(--mt-nt-accent) 45%, var(--m-sep-2));
}
.mt-nt-group-ico {
font-size: 19px;
line-height: 1;
flex: none;
}
.mt-nt-group-t {
font-size: 14.5px;
font-weight: 800;
color: var(--m-text-1);
flex: 1;
line-height: 1.2;
}
.mt-nt-group-cnt {
font-size: 11px;
font-weight: 800;
padding: 3px 9px;
border-radius: 99px;
background: var(--mt-nt-accent, var(--m-acc));
color: #fff;
white-space: nowrap;
}
.mt-nt-group-cnt.mute {
background: var(--m-bg-3);
color: var(--m-text-3);
}
.mt-nt-group-arr {
font-size: 14px;
color: var(--m-text-3);
margin-left: 4px;
font-weight: 800;
width: 14px;
text-align: center;
}
.mt-nt-group-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 8px 10px;
background: var(--m-bg-1);
}
/* m200-Z107: свайп-влево "Прочитать" для одного уведомления */
.mt-nt-swipe-wrap {
position: relative;
overflow: hidden;
border-radius: 10px;
margin: 4px 0;
}
.mt-nt-swipe-action {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 130px;
display: flex;
align-items: stretch;
background: linear-gradient(90deg, rgba(110,168,137,0) 0%, rgba(110,168,137,0.95) 30%, #6ea889 100%);
pointer-events: auto;
}
.mt-nt-swipe-action button {
flex: 1;
border: none;
background: transparent;
color: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
padding: 0 14px 0 26px;
text-align: right;
-webkit-tap-highlight-color: transparent;
}
.mt-nt-swipe-content {
position: relative;
z-index: 1;
transform: translateX(0);
will-change: transform;
background: var(--m-bg-2);
}
.mt-nt-item {
position: relative;
padding: 10px 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-nt-item.unread {
background: var(--m-bg-3);
border-color: var(--m-acc);
}
.mt-nt-item.urgent {
border-color: var(--m-bad);
}
.mt-nt-item:active {
transform: scale(0.99);
}
.mt-nt-dot {
position: absolute;
top: 9px;
right: 11px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--m-acc);
}
.mt-nt-item-t {
font-size: 13px;
font-weight: 700;
color: var(--m-text-1);
margin-bottom: 3px;
padding-right: 18px;
line-height: 1.3;
}
.mt-nt-item-b {
font-size: 12px;
color: var(--m-text-2);
line-height: 1.3;
}
.mt-nt-item-from {
font-size: 12px;
color: var(--m-text-1);
margin: 4px 0 2px;
line-height: 1.35;
}
.mt-nt-item-from b {
color: var(--m-acc);
font-weight: 800;
}
.mt-nt-item-role {
color: var(--m-text-3);
font-weight: 600;
font-size: 11px;
}
.mt-nt-item-task {
font-size: 11.5px;
color: var(--m-text-2);
margin-bottom: 4px;
line-height: 1.3;
font-weight: 600;
}
.mt-nt-item-w {
font-size: 10.5px;
color: var(--m-text-3);
margin-top: 4px;
}
/* ════════════════════════════════════════════════════════════════════
m200-Z18: ПОЛНОЦЕННОЕ переключение тем purple и light-graphite
Раньше эти темы выглядели как «светлая зелёная», потому что JS
ставил им дополнительно класс .theme-light, который перебивал
их переменные обратно. Теперь .theme-light НЕ навешивается.
А чтобы карточки/полосы выглядели «светло» — повторяем здесь
правила, аналогичные .theme-light, для purple и light-graphite.
════════════════════════════════════════════════════════════════════ */
/* Скрываем медные полосы сверху карточек на светлых темах */
html.theme-purple .m-card-acc::before,
html.theme-purple .m-btn-projects::before,
html.theme-purple .mt-proj-item::before,
html.theme-purple .mt-stub-head::before,
html.theme-purple .mt-stub-grid > div::before,
html.theme-purple .mt-stub-stream::before,
html.theme-purple .mt-stub-member::before,
html.theme-purple .mt-proj-stream-card::before,
html.theme-purple .mt-proj-stream-col::before,
html.theme-purple .mt-proj-an-card::before,
html.theme-purple .mt-proj-timeline::before,
html.theme-light-graphite .m-card-acc::before,
html.theme-light-graphite .m-btn-projects::before,
html.theme-light-graphite .mt-proj-item::before,
html.theme-light-graphite .mt-stub-head::before,
html.theme-light-graphite .mt-stub-grid > div::before,
html.theme-light-graphite .mt-stub-stream::before,
html.theme-light-graphite .mt-stub-member::before,
html.theme-light-graphite .mt-proj-stream-card::before,
html.theme-light-graphite .mt-proj-stream-col::before,
html.theme-light-graphite .mt-proj-an-card::before,
html.theme-light-graphite .mt-proj-timeline::before {
display: none !important;
}
/* Карточки на светлом — белый фон + видимая серая рамка + лёгкая тень.
ВАЖНО: .m-btn-projects сюда НЕ включаем — это синяя плашка «Проекты»,
у неё свой градиент во всех темах (см. отдельное правило ниже). */
html.theme-purple .m-card,
html.theme-purple .m-card-acc,
html.theme-purple .mt-proj-item,
html.theme-purple .mt-stub-head,
html.theme-purple .mt-stub-grid > div,
html.theme-purple .mt-stub-stream,
html.theme-purple .mt-stub-member,
html.theme-purple .mt-proj-stream-card,
html.theme-purple .mt-proj-stream-col,
html.theme-purple .mt-proj-an-card,
html.theme-purple .mt-proj-timeline,
html.theme-purple .m-day-block,
html.theme-purple .section,
html.theme-purple .mt-task-who,
html.theme-purple .mt-shift-due-btn,
html.theme-purple .mt-stub-todo,
html.theme-purple .mt-add-subtask,
html.theme-light-graphite .m-card,
html.theme-light-graphite .m-card-acc,
html.theme-light-graphite .mt-proj-item,
html.theme-light-graphite .mt-stub-head,
html.theme-light-graphite .mt-stub-grid > div,
html.theme-light-graphite .mt-stub-stream,
html.theme-light-graphite .mt-stub-member,
html.theme-light-graphite .mt-proj-stream-card,
html.theme-light-graphite .mt-proj-stream-col,
html.theme-light-graphite .mt-proj-an-card,
html.theme-light-graphite .mt-proj-timeline,
html.theme-light-graphite .m-day-block,
html.theme-light-graphite .section,
html.theme-light-graphite .mt-task-who,
html.theme-light-graphite .mt-shift-due-btn,
html.theme-light-graphite .mt-stub-todo,
html.theme-light-graphite .mt-add-subtask {
background: var(--m-bg-2) !important;
border: 1px solid var(--m-sep) !important;
box-shadow: var(--m-sh-s) !important;
}
/* Синяя плашка «Проекты» — синий градиент в ЛЮБОЙ теме */
html.theme-purple .m-btn-projects,
html.theme-light-graphite .m-btn-projects {
background: linear-gradient(180deg, #2D7BC4 0%, #1E5DA4 100%) !important;
border: none !important;
box-shadow: 0 4px 14px rgba(45,123,196,0.25) !important;
color: #fff !important;
}
html.theme-purple .m-btn-projects-t,
html.theme-light-graphite .m-btn-projects-t { color: #fff !important; }
html.theme-purple .m-btn-projects-sub,
html.theme-light-graphite .m-btn-projects-sub { color: rgba(255,255,255,0.85) !important; }
html.theme-purple .m-btn-projects-arr,
html.theme-light-graphite .m-btn-projects-arr { color: rgba(255,255,255,0.85) !important; }
html.theme-purple .m-btn-projects-ic,
html.theme-light-graphite .m-btn-projects-ic {
background: rgba(255,255,255,0.20) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.30) !important;
}
/* Иконки внутри карточек на светлых темах — цвета акцента */
html.theme-purple .mt-proj-ic,
html.theme-purple .mt-stub-ic,
html.theme-purple .mt-stub-av,
html.theme-purple .mt-stub-stream-ic,
html.theme-purple .mt-proj-stream-ic,
html.theme-purple .mt-proj-stream-col-ic,
html.theme-purple .mt-proj-av-pic,
html.theme-light-graphite .mt-proj-ic,
html.theme-light-graphite .mt-stub-ic,
html.theme-light-graphite .mt-stub-av,
html.theme-light-graphite .mt-stub-stream-ic,
html.theme-light-graphite .mt-proj-stream-ic,
html.theme-light-graphite .mt-proj-stream-col-ic,
html.theme-light-graphite .mt-proj-av-pic {
background: var(--m-bg-3) !important;
border-color: var(--m-acc-soft) !important;
color: var(--m-acc) !important;
}
/* Активная пилюля табов */
html.theme-purple .mt-proj-tab.active,
html.theme-light-graphite .mt-proj-tab.active {
background: var(--m-acc-soft);
border-color: var(--m-acc);
color: var(--m-acc);
}
/* ════════════════════════════════════════════════════════════════════
m200-Z18: ЕДИНАЯ обводка форм в цвете темы
Все input/textarea/select в формах задач и любых модалках —
с одинаковым тонким акцентным контуром, при фокусе ярче.
════════════════════════════════════════════════════════════════════ */
.m-field input,
.m-field textarea,
.m-field select,
.m-sheet input[type="text"],
.m-sheet input[type="number"],
.m-sheet input[type="date"],
.m-sheet input[type="time"],
.m-sheet input[type="email"],
.m-sheet input[type="tel"],
.m-sheet input[type="search"],
.m-sheet textarea,
.m-sheet select {
border: 1.5px solid var(--m-acc-soft) !important;
background: var(--m-bg-2) !important;
color: var(--m-text-1) !important;
border-radius: 10px !important;
transition: border-color 0.15s ease;
}
.m-field input:focus,
.m-field textarea:focus,
.m-field select:focus,
.m-sheet input:focus,
.m-sheet textarea:focus,
.m-sheet select:focus {
border-color: var(--m-acc) !important;
outline: none !important;
}
/* Кнопки-плашки выбора (исполнитель/куратор/соисполнитель) — тот же контур */
.mt-pp-trigger,
.mt-people-trigger,
.m-pick-btn,
.m-select-btn {
border: 1.5px solid var(--m-acc-soft) !important;
background: var(--m-bg-2) !important;
color: var(--m-text-1) !important;
border-radius: 10px !important;
}
.mt-pp-trigger:active,
.mt-people-trigger:active {
border-color: var(--m-acc) !important;
}
/* m200-Z19/Z20: однотонная кнопка «Стиль» — заливка цветом текущей темы.
Поверх старых двухцветных правил .mt-theme-label с !important. */
#mt-theme.mt-theme-btn,
#mt-theme {
width: auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
#mt-theme .mt-theme-label,
.mt-theme-btn .mt-theme-label {
display: inline-block !important;
padding: 6px 14px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
/* Сплошной фон: текущая тема прописывает в var(--mt-theme-color),
fallback — медь */
background: var(--mt-theme-color, #E0A85C) !important;
background-image: none !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.20) !important;
line-height: 1 !important;
}
/* На всякий случай: класс .mt-theme-light от старой логики НЕ должен
возвращать двухцветный градиент */
.mt-theme-btn.mt-theme-light .mt-theme-label {
background: var(--mt-theme-color, #21A038) !important;
background-image: none !important;
}
/* m200-Z18: выпадающее меню тем (вместо большого full-sheet) */
.mt-theme-dd {
position: fixed;
z-index: 9999;
background: var(--m-bg-2);
border: 1px solid var(--m-sep-2);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
padding: 6px;
min-width: 220px;
max-width: 260px;
}
.mt-theme-dd-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-theme-dd-item:active { background: var(--m-bg-3); }
.mt-theme-dd-item .mt-theme-dd-sw {
width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
border: 2px solid rgba(0,0,0,0.10);
}
.mt-theme-dd-item .mt-theme-dd-name {
font-size: 14px; font-weight: 600; color: var(--m-text-1); flex: 1;
}
.mt-theme-dd-item.active { background: var(--m-acc-soft); }
.mt-theme-dd-item.active .mt-theme-dd-name { color: var(--m-acc); }
.mt-theme-dd-item .mt-theme-dd-check { color: var(--m-acc); font-weight: 800; }
.mt-theme-dd-bg {
position: fixed; inset: 0; z-index: 9998; background: transparent;
}
/* m200-Z18: строки в редакторе категорий */
.mt-cat-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 10px;
margin-bottom: 8px;
}
.mt-cat-ic {
width: 40px; height: 40px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--m-bg-3);
border-radius: 8px;
font-size: 22px;
}
.mt-cat-name {
flex: 1; min-width: 0;
font-size: 14px; font-weight: 600; color: var(--m-text-1);
}
.mt-cat-sub {
font-size: 11px; color: var(--m-text-3); font-weight: 400; margin-top: 2px;
}
.mt-cat-edit, .mt-cat-del {
background: transparent;
border: 1px solid var(--m-sep);
border-radius: 8px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; -webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.mt-cat-edit:active, .mt-cat-del:active { background: var(--m-bg-3); }
/* ═══════════════════════════════════════════════════════════
m200-Z69: ЕДИНАЯ ДИЗАЙН-СИСТЕМА (utility-классы)
Согласовано с Раилем 26.05.2026 через preview-unified-style.html
Принцип: тёмный фон везде + полоса СВЕРХУ цвета акцента темы,
цветной только заголовок плашки по смыслу.
═══════════════════════════════════════════════════════════ */
/* ─── Универсальная плашка ─── */
.u-card {
position: relative;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 12px;
padding: 14px;
margin: 0 0 12px;
overflow: hidden;
color: var(--m-text-1);
}
.u-card::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: var(--m-acc);
}
.u-card.is-warn::before { background: var(--m-warn); }
.u-card.is-bad::before { background: var(--m-bad); }
.u-card.is-ok::before { background: var(--m-ok); }
.u-card.is-info::before { background: var(--m-info); }
.u-card.is-idle::before { background: var(--m-sep-2); }
.u-card-h {
display: flex; align-items: center; gap: 8px;
font-size: 14.5px; font-weight: 800;
color: var(--m-text-1);
margin-bottom: 6px;
line-height: 1.3;
}
.u-card-h.warn { color: var(--m-warn); }
.u-card-h.bad { color: var(--m-bad); }
.u-card-h.ok { color: var(--m-ok); }
.u-card-h.info { color: var(--m-info); }
.u-card-h.acc { color: var(--m-acc); }
.u-card-body {
font-size: 13.5px;
line-height: 1.5;
color: var(--m-text-1);
}
.u-card-body .muted { color: var(--m-text-2); }
.u-card-body b { color: var(--m-text-1); font-weight: 700; }
/* ─── Пары «Срок / Категория» внутри одной плашки ─── */
.u-pairs { display: flex; gap: 14px; flex-wrap: wrap; }
.u-pair-l {
font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--m-text-2);
margin-bottom: 3px;
}
.u-pair-v {
font-size: 14px; font-weight: 700;
color: var(--m-text-1);
}
/* ─── Кнопки-табы (приоритет, режим, тип) ─── */
.u-tabs {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 6px 0 12px;
}
.u-tab {
padding: 10px 14px; border-radius: 10px;
background: var(--m-bg-3);
color: var(--m-text-2);
border: 1.5px solid var(--m-sep);
font-size: 13.5px; font-weight: 700; line-height: 1;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .12s, color .12s, border-color .12s;
}
.u-tab.active {
background: var(--m-acc);
border-color: var(--m-acc);
color: #fff;
}
/* ─── Поля ввода ─── */
.u-field { margin: 0 0 12px; }
.u-field-l {
display: block;
font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
text-transform: uppercase;
color: var(--m-text-2);
margin: 0 0 5px;
}
.u-input, .u-textarea, .u-select {
width: 100%;
padding: 11px 12px;
background: var(--m-bg-3);
border: 1.5px solid var(--m-sep-2);
border-radius: 10px;
color: var(--m-text-1);
font-size: 14.5px; font-family: inherit;
outline: none;
transition: border-color .12s;
box-sizing: border-box;
}
.u-input:focus, .u-textarea:focus, .u-select:focus {
border-color: var(--m-acc);
}
.u-textarea { min-height: 80px; resize: vertical; }
/* ─── Кнопки внизу (Принять / Вернуть / Согласовать) ─── */
.u-foot {
display: flex; gap: 10px; margin-top: 12px;
}
.u-btn {
flex: 1;
padding: 13px 14px;
border-radius: 11px;
border: 1.5px solid transparent;
font-size: 14.5px; font-weight: 700;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.u-btn-pri { background: var(--m-acc); color: #fff; }
.u-btn-sec { background: var(--m-bg-3); border-color: var(--m-sep-2); color: var(--m-text-1); }
.u-btn-bad { background: transparent; border-color: var(--m-bad); color: var(--m-bad); }
.u-btn-ok { background: var(--m-ok); color: #fff; }
.u-btn:active { transform: scale(0.98); }
/* m200-Z153/Z154: Экран «Сообщения» — фирменный стиль через переменные.
При смене темы все элементы перекрашиваются через var(--m-acc) и var(--m-bg-*).
Подписи «Задача:» / «Сообщение:» — акцентом текущей темы inline в одну строку с текстом. */
/* m200-Z161: табы Новые/Прочитанные — крупнее, читаемее. Неактивная вкладка на светлой теме = чёрный текст. */
.mt-msg-tabs {
display: flex;
gap: 6px;
margin: 0 0 14px;
padding: 5px;
background: var(--m-bg-3);
border-radius: 10px;
}
.mt-msg-tab {
flex: 1;
padding: 12px 14px;
font-size: 15px;
font-weight: 600;
background: transparent;
color: var(--m-text-1);
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
-webkit-tap-highlight-color: transparent;
font-family: inherit;
transition: background .15s, color .15s;
}
.mt-msg-tab--active {
background: var(--m-acc);
color: #fff;
font-weight: 700;
}
html.theme-light .mt-msg-tab:not(.mt-msg-tab--active),
html.theme-light-graphite .mt-msg-tab:not(.mt-msg-tab--active) {
color: #000 !important;
}
.mt-msg-tab-badge {
background: rgba(255,255,255,0.25);
padding: 2px 9px;
border-radius: 99px;
font-size: 12px;
font-weight: 700;
min-width: 22px;
text-align: center;
}
.mt-msg-tab:not(.mt-msg-tab--active) .mt-msg-tab-badge {
background: var(--m-acc);
color: #fff;
}
.mt-msg-sender {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin: 0 0 10px;
border-radius: 12px;
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 3px solid var(--m-sep);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .15s ease;
}
.mt-msg-sender--unread {
border-color: var(--m-acc);
border-left-color: var(--m-acc);
}
.mt-msg-sender:active { transform: scale(0.98); }
.mt-msg-avatar {
width: 44px; height: 44px; min-width: 44px;
border-radius: 50%;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
display: flex; align-items: center; justify-content: center;
flex: none;
font-weight: 700; font-size: 14px;
color: var(--m-text-2);
}
.mt-msg-sender--unread .mt-msg-avatar {
border-color: var(--m-acc);
color: var(--m-acc);
}
.mt-msg-sender-info { flex: 1; min-width: 0; }
.mt-msg-sender-name {
font-size: 14px; font-weight: 700;
color: var(--m-text-1);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-msg-sender-pos {
font-size: 11.5px;
color: var(--m-text-3);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-msg-sender-cnt {
font-size: 12px;
color: var(--m-text-2);
margin-top: 4px;
}
.mt-msg-sender--unread .mt-msg-sender-cnt { color: var(--m-acc); }
.mt-msg-sender-side {
display: flex; flex-direction: column;
align-items: flex-end; gap: 6px;
flex: none;
}
/* m200-Z161: круглый бейдж с числом сообщений. Всегда акцентом темы (зелёный/медный/фиолетовый), цифра белая. */
.mt-msg-sender-badge {
background: var(--m-acc);
color: #fff;
font-size: 13px;
font-weight: 700;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.mt-msg-sender--unread .mt-msg-sender-badge {
background: var(--m-acc);
color: #fff;
}
/* m200-Z297: в «Прочитанных» кружок-счётчик СЕРЫЙ (не акцентный) — синий/медный
цвет означает «непрочитанное» и должен быть только в «Новых». */
.mt-msg-sender--read .mt-msg-sender-badge {
background: var(--m-bg-3) !important;
color: var(--m-text-3) !important;
}
.mt-msg-sender-chev {
color: var(--m-text-3);
font-size: 18px;
line-height: 1;
}
/* Карточка сообщения на уровне 2. m200-Z163: компактные отступы */
.mt-msg-card {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 3px solid var(--m-sep);
border-radius: 12px;
padding: 10px 12px 10px 14px;
margin: 0 0 10px;
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mt-msg-card--unread {
border-color: var(--m-acc);
border-left-color: var(--m-acc);
}
.mt-msg-card:active { transform: scale(0.99); }
.mt-msg-badge {
position: absolute;
top: 10px;
right: 12px;
font-size: 11px;
padding: 2px 10px;
border-radius: 99px;
font-weight: 700;
}
.mt-msg-badge--new {
background: var(--m-acc);
color: #fff;
}
.mt-msg-badge--read {
background: var(--m-bg-3);
color: var(--m-text-3);
font-weight: 600;
border: 1px solid var(--m-sep);
}
/* m200-Z162: только верхняя строка с «Задача №ID» оставляет место под бейдж «Новое».
Плашка «Сообщение:» — на всю ширину карточки, чтобы текст не ломался лишний раз. */
.mt-msg-card .mt-msg-line {
padding-right: 70px;
}
.mt-msg-card .mt-msg-text-row {
margin-right: 0;
}
/* m200-Z153: «Задача:» и «Сообщение:» — inline-метки медным цветом в начале строки.
Текст идёт сразу после, без переноса на новую строку. */
.mt-msg-lbl {
color: var(--m-acc);
font-weight: 700;
font-size: 13px;
margin-right: 4px;
}
.mt-msg-line {
font-size: 13px;
color: var(--m-text-1);
line-height: 1.4;
margin: 0 0 4px;
overflow-wrap: anywhere;
word-break: break-word;
}
.mt-msg-text-row {
font-size: 14px;
font-weight: 500;
color: var(--m-text-1);
line-height: 1.4;
margin: 4px 0 0;
padding: 8px 10px;
background: var(--m-bg-3);
border-radius: 8px;
overflow-wrap: anywhere;
word-break: break-word;
}
/* m200-Z163: «7 ч назад» рядом с лейблом задачи (inline), приглушённым серым */
.mt-msg-when {
font-size: 11px;
color: var(--m-text-3);
font-weight: 500;
margin-right: 2px;
white-space: nowrap;
}
.mt-msg-card--unread .mt-msg-text-row {
background: rgba(224, 168, 92, 0.12);
color: var(--m-text-1);
font-weight: 700;
}
/* m200-Z160: жёсткий контраст текста в карточках сообщений.
Чёрный на светлых темах, белый на тёмных — переменные слишком серые. */
html.theme-light .mt-msg-line,
html.theme-light .mt-msg-text-row,
html.theme-light .mt-msg-card--unread .mt-msg-text-row,
html.theme-light-graphite .mt-msg-line,
html.theme-light-graphite .mt-msg-text-row,
html.theme-light-graphite .mt-msg-card--unread .mt-msg-text-row {
color: #000 !important;
}
html.theme-light .mt-msg-sender-name,
html.theme-light-graphite .mt-msg-sender-name {
color: #000 !important;
}
html:not(.theme-light):not(.theme-light-graphite) .mt-msg-line,
html:not(.theme-light):not(.theme-light-graphite) .mt-msg-text-row,
html:not(.theme-light):not(.theme-light-graphite) .mt-msg-card--unread .mt-msg-text-row,
html:not(.theme-light):not(.theme-light-graphite) .mt-msg-sender-name {
color: #fff !important;
}
.mt-msg-card--unread .mt-msg-text-row .mt-msg-lbl {
color: var(--m-acc);
}
.mt-msg-time {
font-size: 11px;
color: var(--m-text-3);
margin-top: 6px;
}
/* m200-Z161: аккордеоны «По людям / По задачам» — тёмная обводка на светлой теме, круглый бейдж акцента темы. */
.mt-msg-acc {
background: var(--m-bg-2);
border: 2px solid var(--m-sep);
border-radius: 12px;
margin: 8px 0 12px;
overflow: hidden;
}
html.theme-light .mt-msg-acc,
html.theme-light-graphite .mt-msg-acc {
border-color: rgba(0,0,0,0.35) !important;
}
.mt-msg-acc-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
}
.mt-msg-acc-ic {
font-size: 20px;
line-height: 1;
}
.mt-msg-acc-title {
flex: 1;
font-size: 16px;
font-weight: 700;
color: var(--m-text-1);
}
/* Круглый бейдж акцентом темы, цифра белая — единый стиль на весь экран. */
.mt-msg-acc-cnt {
background: var(--m-acc);
color: #fff;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
/* m200-Z297: в «Прочитанных» счётчик-кружок аккордеона серый, не акцентный. */
.mt-msg-acc-cnt--read {
background: var(--m-bg-3) !important;
color: var(--m-text-3) !important;
}
.mt-msg-acc-chev {
display: inline-block;
color: var(--m-text-1);
font-size: 18px;
font-weight: 700;
transition: transform .2s;
width: 14px;
text-align: center;
}
.mt-msg-acc-body {
border-top: 1px solid var(--m-sep);
padding: 10px;
}
.mt-msg-acc-body .mt-msg-sender {
margin-bottom: 8px;
}
.mt-msg-acc-body .mt-msg-sender:last-child {
margin-bottom: 0;
}
.mt-msg-empty {
padding: 28px 14px;
text-align: center;
color: var(--m-text-3);
font-size: 13px;
}
html.theme-light .mt-msg-acc-title,
html.theme-light-graphite .mt-msg-acc-title {
color: #000 !important;
}
/* Карточки внутри аккордеонов — тёмная обводка на светлой теме. */
html.theme-light .mt-msg-acc-body .mt-msg-sender,
html.theme-light-graphite .mt-msg-acc-body .mt-msg-sender {
border-color: rgba(0,0,0,0.25) !important;
border-left-color: rgba(0,0,0,0.25) !important;
}
html.theme-light .mt-msg-acc-body .mt-msg-sender--unread,
html.theme-light-graphite .mt-msg-acc-body .mt-msg-sender--unread {
border-color: var(--m-acc) !important;
border-left-color: var(--m-acc) !important;
}
/* m200-Z175: placeholder «дд.мм.гг» для пустого .
Браузер не показывает placeholder у date-input, поэтому делаем через ::before. */
input.mt-date-with-ph {
position: relative;
color: var(--m-text-1);
}
input.mt-date-with-ph:invalid::before,
input.mt-date-with-ph:not([data-has-value])::before {
content: attr(data-placeholder);
color: var(--m-text-3);
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 14px;
}
input.mt-date-with-ph[data-has-value]::before { content: none; }
/* Когда поле в фокусе и пустое — placeholder остаётся виден, но чуть прозрачнее */
input.mt-date-with-ph:focus:not([data-has-value])::before { opacity: 0.5; }
/* m200-Z177+Z178: лента «История доработок» — события снизу вверх внутри сворачиваемой плашки.
Z178: больше воздуха между плашками + явные обводки чтобы блоки не сливались. */
.mt-hist2-body {
display: flex;
flex-direction: column;
gap: 16px;
}
.mt-hist2-ev {
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep-2, var(--m-sep));
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
html.theme-light .mt-hist2-ev,
html.theme-light-graphite .mt-hist2-ev {
border-color: rgba(0,0,0,0.22) !important;
}
.mt-hist2-ev-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.mt-hist2-tag {
padding: 2px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
.mt-hist2-tag--neutral { background: #5a5a60; }
.mt-hist2-tag--submit { background: #4A9B6E; }
.mt-hist2-tag--reject { background: #E25555; }
.mt-hist2-when {
font-size: 10.5px;
color: var(--m-text-3);
}
.mt-hist2-who {
font-size: 11.5px;
font-weight: 700;
color: var(--m-text-2);
margin-bottom: 4px;
}
.mt-hist2-msg {
font-size: 13.5px;
color: var(--m-text-1);
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
html.theme-light .mt-hist2-msg,
html.theme-light-graphite .mt-hist2-msg { color: #000 !important; }
/* старая Z176 карточка — оставлено для обратной совместимости, не используется */
.mt-rwk2-banner {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 14px;
}
/* 1. ШАПКА-СТАТУС */
.mt-rwk2-status {
background: rgba(255,159,67,0.08);
border: 1px solid rgba(255,159,67,0.45);
border-radius: 12px;
padding: 12px 14px;
}
.mt-rwk2-status-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.mt-rwk2-status-ico { font-size: 18px; line-height: 1; }
.mt-rwk2-status-t {
font-size: 15px;
font-weight: 700;
color: #FFB663;
line-height: 1.3;
}
.mt-rwk2-status-sub {
font-size: 11.5px;
color: var(--m-text-3);
margin-left: 26px;
}
html.theme-light .mt-rwk2-status-t,
html.theme-light-graphite .mt-rwk2-status-t {
color: #B5651C !important;
}
/* 2. ПЛАШКА «ЧТО ПЕРЕДЕЛАТЬ» */
.mt-rwk2-need {
background: var(--m-bg-2);
border: 1px solid rgba(210,149,74,0.45);
border-radius: 12px;
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.mt-rwk2-need-ico {
font-size: 20px;
line-height: 1;
flex: none;
}
.mt-rwk2-need-body { flex: 1; min-width: 0; }
.mt-rwk2-need-l {
font-size: 11px;
font-weight: 700;
color: var(--m-acc);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.mt-rwk2-need-v {
font-size: 14px;
font-weight: 600;
color: var(--m-text-1);
line-height: 1.35;
}
html.theme-light .mt-rwk2-need-v,
html.theme-light-graphite .mt-rwk2-need-v { color: #000 !important; }
.mt-rwk2-need-when {
font-size: 11px;
color: var(--m-text-3);
margin-top: 4px;
}
/* 3. ИСТОРИЯ ПОПЫТОК */
.mt-rwk2-history-h {
font-size: 11px;
font-weight: 700;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 6px 4px 4px;
}
.mt-rwk2-att {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-left: 3px solid #E25555;
border-radius: 10px;
padding: 10px 12px;
}
.mt-rwk2-att--old { opacity: 0.85; }
.mt-rwk2-att-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.mt-rwk2-att-tag {
background: #E25555;
color: #fff;
padding: 2px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
}
.mt-rwk2-att--old .mt-rwk2-att-tag { background: #5a2e2e; }
.mt-rwk2-att-when {
font-size: 10.5px;
color: var(--m-text-3);
}
.mt-rwk2-att-block { margin-bottom: 8px; }
.mt-rwk2-att-block:last-child { margin-bottom: 0; }
.mt-rwk2-att-lbl {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 4px;
}
.mt-rwk2-att-block--sub .mt-rwk2-att-lbl { color: #9BC59B; }
.mt-rwk2-att-block--mgr .mt-rwk2-att-lbl { color: #FFB663; }
.mt-rwk2-att-msg {
font-size: 13.5px;
color: var(--m-text-1);
line-height: 1.4;
margin-bottom: 6px;
}
html.theme-light .mt-rwk2-att-msg,
html.theme-light-graphite .mt-rwk2-att-msg { color: #000 !important; }
.mt-rwk2-media {
display: inline-block;
margin-top: 4px;
border-radius: 8px;
overflow: hidden;
max-width: 100%;
}
.mt-rwk2-media img {
display: block;
max-width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
}
.mt-rwk2-file {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 10px;
background: var(--m-bg-3);
border: 1px solid var(--m-sep);
border-radius: 8px;
text-decoration: none;
max-width: 100%;
}
/* 4. ПОСТАНОВКА ЗАДАЧИ */
.mt-rwk2-orig {
background: var(--m-bg-2);
border: 1px solid var(--m-sep);
border-radius: 10px;
padding: 10px 12px;
opacity: 0.9;
}
.mt-rwk2-orig-h {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.mt-rwk2-orig-tag {
background: var(--m-bg-3);
color: var(--m-text-2);
padding: 2px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
}
.mt-rwk2-orig-when {
font-size: 10.5px;
color: var(--m-text-3);
}
.mt-rwk2-orig-by {
font-size: 11.5px;
font-weight: 700;
color: #88AACC;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 4px;
}
.mt-rwk2-orig-t {
font-size: 13px;
color: var(--m-text-2);
line-height: 1.4;
}
/* 5. Подсказка */
.mt-rwk2-hint {
background: rgba(110,168,137,0.12);
border: 1px solid rgba(110,168,137,0.4);
border-radius: 10px;
padding: 10px 12px;
font-size: 12.5px;
color: var(--m-text-1);
line-height: 1.45;
}
/* m200-Z194: комментарий исполнителя при закрытии шага */
.mt-step-note {
margin-top: 8px;
padding: 8px 12px;
background: var(--m-bg-3);
border-left: 3px solid var(--m-acc);
border-radius: 6px;
font-size: 13px;
color: var(--m-text-1);
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
.mt-step-note-lbl {
color: var(--m-acc);
font-weight: 700;
margin-right: 4px;
}
html.theme-light .mt-step-note,
html.theme-light-graphite .mt-step-note {
color: #000 !important;
}
/* m200-Z165: раскрывашка «Опции» в форме новой задачи */
.mt-opts-wrap {
margin-top: 4px;
}
.mt-opts-head {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--m-bg-2);
border: 1.5px solid var(--m-sep);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.mt-opts-head:active { transform: scale(0.99); }
.mt-opts-chev {
display: inline-block;
font-size: 18px;
font-weight: 700;
color: var(--m-text-1);
transition: transform .2s;
width: 14px;
text-align: center;
}
.mt-opts-title {
font-size: 14px;
font-weight: 700;
color: var(--m-text-1);
}
.mt-opts-cnt {
background: var(--m-acc);
color: #fff;
padding: 2px 10px;
border-radius: 99px;
font-size: 11px;
font-weight: 700;
}
.mt-opts-hint {
margin-left: auto;
font-size: 11px;
color: var(--m-text-3);
font-weight: 500;
}
.mt-opts-body {
padding-top: 10px;
}
html.theme-light .mt-opts-title,
html.theme-light-graphite .mt-opts-title {
color: #000 !important;
}
/* m200-Z167+Z168+Z169: единый стиль шевронов во ВСЁМ задачнике.
Все стрелки = одна большая медная (или акцент темы) `›`.
Символ оригинальный (▾/›/▸) скрываем через font-size:0,
рисуем единый '›' через ::before. */
/* === ГРУППА A: СВОРАЧИВАЮЩИЕ ===
JS-логика крутит контейнер: свёрнуто = rotate(-90deg), раскрыто = rotate(0).
Под старый ▾ это работало. Под наш '›' добавляем +90° к ::before.
Итог: свёрнуто = '›' указывает вправо, раскрыто = '›' указывает вниз. */
.m-hist-chev,
.mt-chat-chev,
.mt-steps-chev,
.mt-delegb-chev,
.mt-opts-chev,
.mt-hist2-chev,
.m-day-chev,
.mt-nt-group-arr,
.mt-ideas-cat-arr,
.mt-rework-hist-arr,
.mt-accept-history-arr,
.mt-attach-arr,
.mt-msg-acc-chev,
/* === ГРУППА B: СТАТИЧНЫЕ ПЕРЕХОДЫ ===
Контейнер не крутится. Просто '›' указывает вправо. */
.mt-shift-due-arr,
.m-btn-projects-arr,
.m-row-arrow,
.mt-msg-sender-chev {
color: var(--m-acc) !important;
font-size: 0 !important;
line-height: 1 !important;
width: 24px !important;
height: 24px !important;
text-align: center !important;
transition: transform .2s ease !important;
position: relative;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
}
.m-hist-chev::before,
.mt-chat-chev::before,
.mt-steps-chev::before,
.mt-delegb-chev::before,
.mt-opts-chev::before,
.mt-hist2-chev::before,
.m-day-chev::before,
.mt-nt-group-arr::before,
.mt-ideas-cat-arr::before,
.mt-rework-hist-arr::before,
.mt-accept-history-arr::before,
.mt-attach-arr::before,
.mt-msg-acc-chev::before,
.mt-shift-due-arr::before,
.m-btn-projects-arr::before,
.m-row-arrow::before,
.mt-msg-sender-chev::before {
content: '\203A'; /* › */
font-size: 26px;
font-weight: 700;
color: var(--m-acc);
line-height: 1;
display: block;
}
/* Сворачивающие группа 1 — JS крутит контейнер transform: rotate(-90deg).
Чтобы наш '›' смотрел вправо при свёрнутом / вниз при раскрытом — +90° к ::before. */
.m-hist-chev::before,
.mt-chat-chev::before,
.mt-steps-chev::before,
.mt-delegb-chev::before,
.mt-hist2-chev::before,
.m-day-chev::before,
.mt-ideas-cat-arr::before,
.mt-rework-hist-arr::before,
.mt-accept-history-arr::before,
.mt-msg-acc-chev::before {
transform: rotate(90deg);
}
/* m200-Z204: mt-attach-arr внутри — это нативный аккордеон без JS-rotate контейнера.
::before смотрит вправо в закрытом, и вниз в открытом — через .mt-attach-wrap[open]. */
.mt-attach-arr::before {
transform: rotate(0deg);
}
.mt-attach-wrap[open] .mt-attach-arr::before {
transform: rotate(90deg);
}
/* m200-Z172: mt-nt-group-arr — Уведомления. JS НЕ крутит контейнер, а меняет HTML ▾/▸.
Под наш '›' это не работает (символ скрыт font-size:0). Крутим ::before по классу .open
на родительской шапке .mt-nt-group-h. */
.mt-nt-group-arr::before {
transform: rotate(0deg);
}
.mt-nt-group-h.open .mt-nt-group-arr::before {
transform: rotate(90deg);
}
/* m200-Z173: mt-opts-chev — «Опций задачи» в форме новой задачи.
JS навешивает класс .open на родительскую кнопку #mt-opts-toggle. */
.mt-opts-chev::before {
transform: rotate(0deg);
}
.mt-opts-head.open .mt-opts-chev::before {
transform: rotate(90deg);
}
/* Статичные — без добавочного поворота */
.mt-shift-due-arr::before,
.m-btn-projects-arr::before,
.m-row-arrow::before,
.mt-msg-sender-chev::before {
transform: rotate(0deg);
}
/* m200-Z165+Z166: на кнопке «Составная» — мелкая надпись «в разработке» в правом верхнем углу.
Сама кнопка остаётся с центрированным текстом «Составная» (как «Простая»). */
.mt-type-chip--wip {
position: relative;
}
.mt-type-chip-wip-tag {
position: absolute;
top: 4px;
right: 8px;
font-size: 9px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.2px;
color: var(--m-text-2);
background: transparent;
pointer-events: none;
white-space: nowrap;
}
/* Светлая тема — тёмный читаемый цвет */
html.theme-light .mt-type-chip-wip-tag,
html.theme-light-graphite .mt-type-chip-wip-tag {
color: rgba(0,0,0,0.62) !important;
}
/* Тёмные темы — светлый цвет */
html:not(.theme-light):not(.theme-light-graphite) .mt-type-chip-wip-tag {
color: rgba(255,255,255,0.75) !important;
}
/* m200-Z163: плашка-шапка выбранного человека (кнопка назад + аватарка + ФИО) */
.mt-msg-back-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding: 10px 12px;
background: var(--m-bg-3);
border-radius: 10px;
}
.mt-msg-back-btn,
.mt-msg-back-av {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
max-height: 38px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
box-sizing: border-box !important;
padding: 0 !important;
line-height: 1 !important;
font-family: inherit;
}
.mt-msg-back-btn {
background: var(--m-bg-2) !important;
border: 1px solid var(--m-sep) !important;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.mt-msg-back-btn:active { transform: scale(0.95); }
.mt-msg-back-ic {
font-size: 22px;
color: var(--m-text-1);
line-height: 1;
display: block;
transform: translateY(-1px);
}
.mt-msg-back-av {
background: rgba(210,149,74,0.18) !important;
border: none !important;
font-weight: 700;
font-size: 14px;
color: var(--m-warn);
}
.mt-msg-back-info { flex: 1; min-width: 0; }
.mt-msg-back-name {
font-size: 14px;
font-weight: 700;
color: var(--m-text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mt-msg-back-pos {
font-size: 11px;
color: var(--m-text-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html.theme-light .mt-msg-back-name,
html.theme-light-graphite .mt-msg-back-name {
color: #000 !important;
}
/* m200-Z161: карточка сообщения с поддержкой свайпа (галочка удалена — клик по плашке открывает задачу) */
.mt-msg-card-swipeable {
position: relative;
touch-action: pan-y;
}
/* m200-Z162: зелёная подложка-индикатор, выезжает из-под карточки при свайпе влево.
Оборачивает карточку — карточка сверху едет, подложка остаётся, видна по мере открытия. */
.mt-msg-swipe-wrap {
position: relative;
margin: 0 0 10px;
}
.mt-msg-swipe-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #2E9E5C;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 22px;
color: #fff;
font-weight: 700;
font-size: 14px;
gap: 8px;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
z-index: 0;
}
.mt-msg-swipe-bg .mt-msg-swipe-ic {
font-size: 22px;
line-height: 1;
}
.mt-msg-swipe-wrap .mt-msg-card {
position: relative;
z-index: 1;
margin: 0;
}
/* m200-Z161: тёмная обводка карточек сообщений на светлой теме */
html.theme-light .mt-msg-card,
html.theme-light-graphite .mt-msg-card {
border-color: rgba(0,0,0,0.25) !important;
border-left-color: rgba(0,0,0,0.25) !important;
}
html.theme-light .mt-msg-card--unread,
html.theme-light-graphite .mt-msg-card--unread {
border-color: var(--m-acc) !important;
border-left-color: var(--m-acc) !important;
}
/* m200-Z161: заголовок «Задача №190» на светлой теме — чёрный жирный (не зелёный) */
html.theme-light .mt-msg-card .mt-msg-lbl,
html.theme-light-graphite .mt-msg-card .mt-msg-lbl {
color: #000 !important;
}
/* «Сообщение:» в карточке тоже чёрным на светлой теме */
html.theme-light .mt-msg-card--unread .mt-msg-text-row .mt-msg-lbl,
html.theme-light-graphite .mt-msg-card--unread .mt-msg-text-row .mt-msg-lbl,
html.theme-light .mt-msg-card .mt-msg-text-row .mt-msg-lbl,
html.theme-light-graphite .mt-msg-card .mt-msg-text-row .mt-msg-lbl {
color: #000 !important;
}
/* m200-Z161+Z164: обрезание длинного текста задачи до 3 строк + кнопка «Показать полностью».
Z164: -webkit-line-clamp резервирует место под 3 строки. Фиксируем max-height + height:auto. */
.mt-msg-task-text {
display: block;
}
.mt-msg-task-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(1.4em * 3);
height: auto;
}
.mt-msg-task-expanded {
display: block;
overflow: visible;
max-height: none;
}
/* m200-Z164: кнопка «Показать полностью» вплотную к тексту — без верхнего отступа */
.mt-msg-toggle {
display: block;
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--m-acc);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
line-height: 1.2;
text-align: left;
}
.mt-msg-toggle:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════
m200-Z252-Е2 (30.05.2026): admin-readonly режим карточки задачи.
Включается body-классом .admin-readonly при открытии задачи из аналитики.
Скрывает: все формы действий внизу sheet, форму чата (ввод/отправка),
кнопку редактирования и любые элементы с .mt-write-action.
Оставляет: всё что показывает данные (заголовок, описание, история,
медиа, существующие сообщения чата).
═══════════════════════════════════════════════════════════ */
body.admin-readonly .m-sheet-foot,
body.admin-readonly .mt-chat-form,
body.admin-readonly .mt-write-action,
body.admin-readonly .mt-edit-task-btn {
display: none !important;
}
/* Лента-плашка сверху чтобы админу было ясно что он в режиме просмотра */
body.admin-readonly .m-sheet-body::before {
content: "👁 Режим просмотра — действия и чат скрыты";
display: block;
background: rgba(74,158,255,0.12);
border: 1px solid rgba(74,158,255,0.35);
color: #4A9EFF;
font-size: 12px;
font-weight: 700;
padding: 8px 14px;
border-radius: 10px;
text-align: center;
margin: 8px var(--m-pad) 8px;
letter-spacing: 0.3px;
}
/* ── Drill-down список задач из аналитики ── */
.adm-tasklist {
padding: 4px 12px;
}
.adm-tasklist-header {
font-size: 11.5px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 700;
padding: 12px 4px 8px;
}
.adm-tasklist-row {
background: var(--m-bg-3);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 6px;
cursor: pointer;
border-left: 3px solid var(--m-sep);
transition: transform 0.1s, background 0.15s;
}
.adm-tasklist-row:hover { background: rgba(255,255,255,0.04); }
/* m200-Z255 (30.05.2026): убрали scale-эффект — раздражал Раиля при тапе на широкие карточки */
.adm-tasklist-row:active { background: rgba(255,255,255,0.07); }
.adm-tasklist-row.s-overdue { border-left-color: #e25555; }
.adm-tasklist-row.s-done { border-left-color: #5ec97a; }
.adm-tasklist-row.s-await { border-left-color: #4A9EFF; }
.adm-tasklist-row.s-rej { border-left-color: #d34a4a; }
.adm-tasklist-row.s-prog { border-left-color: var(--m-acc); }
.adm-tasklist-row .t-title {
font-size: 13.5px;
font-weight: 700;
color: var(--m-text-1);
margin-bottom: 4px;
line-height: 1.3;
}
.adm-tasklist-row .t-meta {
font-size: 11.5px;
color: var(--m-text-3);
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.adm-tasklist-row .t-id {
display: inline-block;
font-weight: 800;
color: var(--m-acc);
margin-right: 6px;
}
/* Кликабельные имена в аналитике */
/* m200-Z255 (30.05.2026): убрали эффект уменьшения/полупрозрачности на тапе — раздражал.
Оставляем только курсор-указатель. Никакого scale/opacity на :active. */
.adm-link {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.adm-link:hover { background: rgba(255,255,255,0.04); }
/* ═══════════════════════════════════════════════════════════
m200-Z256-А (30.05.2026): Топ-табы в Сообщениях — переключение
между «📌 По задачам» (старое поведение) и «💬 Чаты» (новый модуль).
Стиль = пилюли как у вкладок задачника, но компактнее.
═══════════════════════════════════════════════════════════ */
.mt-msg-toptabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 10px var(--m-pad, 12px) 4px;
/* Z277: фон наследуется от sheet-body, чтобы вкладки не выглядели «на отдельной плашке». */
background: transparent;
position: sticky;
top: 0;
z-index: 5;
}
.mt-msg-toptab {
height: 38px;
border-radius: 10px;
background: var(--m-bg-3);
color: var(--m-text-2);
border: 1px solid var(--m-sep);
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s, color 0.15s;
}
.mt-msg-toptab--active {
background: var(--m-acc);
color: #1a1a1c;
border-color: var(--m-acc);
}
/* ═══════════════════════════════════════════════════════════
m200-Z257 (30.05.2026): Observer-режим карточки задачи.
Юзер только наблюдатель чата — ВИДИТ карточку, ПИШЕТ в чат,
но НЕ может управлять задачей.
Скрываем низнюю панель действий и кнопку Редактировать.
ОСТАВЛЯЕМ чат (форма ввода видна).
═══════════════════════════════════════════════════════════ */
body.observer-mode .m-sheet-foot,
body.observer-mode .mt-edit-task-btn {
display: none !important;
}
/* Синяя плашка-предупреждение сверху для наблюдателя */
body.observer-mode .m-sheet-body::before {
content: "👁 Вы наблюдатель — действия по задаче скрыты, в чат писать можно";
display: block;
background: rgba(74,158,255,0.12);
border: 1px solid rgba(74,158,255,0.35);
color: #4A9EFF;
font-size: 12px;
font-weight: 700;
padding: 8px 14px;
border-radius: 10px;
text-align: center;
margin: 8px var(--m-pad) 8px;
letter-spacing: 0.3px;
}