/*
 * standalone.css — стили только для автономного режима (standalone).
 *
 * Подключается ПОСЛЕ остальных CSS на index.php (standalone-ветка),
 * login.php и register.php, поэтому может переопределять их правила.
 * В режиме Bitrix24 НЕ подключается.
 */

/* Header: full-width dark-grey bar, content inset 50px each side */
.header-wrapper,
#demo-banner-slot {
    padding: 0;              /* remove the 20px side inset so the bar is full width */
}
header {
    border-radius: 0;        /* square edges for a full-bleed bar */
    padding: 5px 50px;       /* logo/nav inset 50px on both sides (was 30px) */
    position: relative;      /* anchor the absolute #user-menu dropdown to the header */
}

/* ── Header user menu (visual copy of demo) ───────────────────────────── */
#right-menu {
    display: flex;
    margin-left: auto;       /* push to the right edge of the header */
    align-items: center;
    padding-left: 30px;
}
#right-menu-user {
    display: flex;
    align-items: center;
    padding-left: 15px;
    cursor: pointer;
}
#right-menu-user-photo {
    width: 30px;
    height: 30px;
    border-radius: 15px;
}
#right-menu-user-down {
    display: inline-block;
    margin-left: 15px;
    font-size: 0.6rem;
    opacity: 0.75;
    transition: transform 0.2s;
    color: inherit;          /* pin colour to the header text (see hover override below) */
}
/* No hover effect on the chevron — neither hovering the arrow itself nor the photo/menu block
   may change its colour/opacity. The real culprit was the SHARED rule
   `i.fa:hover, i.fas:hover, i.far:hover { color:#535c69 }` (style.css ~508): the chevron is
   <i class="far fa-chevron-down">, so `i.far:hover` recoloured it to dark slate → it appeared
   to vanish against the dark header. These id-specificity overrides defeat it (and any future
   parent-hover colour). The arrow only reacts to the menu being OPEN (rotate). Standalone-only —
   shared rule untouched, so B24 keeps its behaviour. */
#right-menu-user-down:hover,
#right-menu-user:hover #right-menu-user-down {
    color: inherit;
    opacity: 0.75;
}
#right-menu-user.user-menu-open #right-menu-user-down,
#right-menu-user.user-menu-open:hover #right-menu-user-down,
#right-menu-user.user-menu-open #right-menu-user-down:hover { opacity: 1; transform: rotate(180deg); color: inherit; }
#user-menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 50px;             /* align under the avatar (our header inset is 50px) */
    box-sizing: border-box;
    width: 240px;
    padding: 5px 0;
    color: #fff;
    background-color: #535c69;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.5);
    z-index: 5;
}
.user-menu-item {
    padding: 10px 30px;
    opacity: 0.75;
    cursor: pointer;
    transition: 0.2s;
}
.user-menu-item:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.25); }
#user-menu-settings { display: none; padding: 5px 30px 10px 30px; }
.user-menu-setting { display: flex; align-items: flex-start; cursor: pointer; }
.user-menu-setting--second { margin-top: 20px; }   /* отступ над «Тестовый режим» (как B24) */
.user-menu-setting span { margin-top: -2px; line-height: normal; }
#user-menu-restrict-rights,
#user-menu-test-mode {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    background-color: #fff;
    border: 2px solid #535c69;
    border-radius: 4px;
    cursor: pointer;
}
#user-menu-restrict-rights:checked::after,
#user-menu-test-mode:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 7px;
    border: solid #535c69;
    border-width: 0 3px 3px 0;
    border-radius: 2px;
    transform: translate(-50%, -60%) rotate(45deg);
}
.user-menu-setting-hint {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75em;
}

/* Fix: allow vertical scrolling in standalone (shared body rule blocks it) */
body {
    overflow-y: auto;
}

/* Content sections: match the header's 50px side inset (top/bottom kept) */
#timing-page {
    padding-left: 50px;
    padding-right: 50px;
}
#task-page {
    padding-left: 50px;
    padding-right: 50px;
}

/* Force exact vertical centering of the logo (override inherited float) */
#logo {
    display: flex;
    align-items: center;
    height: 50px;
}

/* ── Standalone task rows: deadline via flatpickr (formatted d.m.Y, like demo) ──
   flatpickr replaces .input-deadline with an altInput text field; keep it compact
   so it fits the .main-deadline cell and doesn't push the close (✓) out. */
/* add-task input: demo uses border-box (36px); our shared style.css leaves it
   content-box (40px). Match the demo. */
#add-task-input {
    box-sizing: border-box;
}

#task-page .main-deadline .input-deadline,
#task-page .main-deadline input.form-control {
    box-sizing: border-box;
    width: 120px;            /* match demo (was 130) */
    font-size: 14px;         /* match demo (was 13) */
    padding: 1px 2px 1px 0;  /* match demo's alt-input padding */
    margin: 0;               /* drop the stray 2px left margin */
    border: none;
    background: transparent;
    color: #535c69;
    cursor: pointer;
}

/* Cat.1 #1 — deadline HEADER cell: demo is single-line (line-height 36, no v-padding).
   Our shared style.css makes it multi-line (line-height 18, 5px v-padding) for the long
   rosco text; override here so "Крайний срок" sits on one line like the demo. */
#tracker-thead .tracker-th.main-deadline {
    line-height: 36px;
    padding: 0 0 0 20px;
    min-height: 0;
    white-space: nowrap;
}

/* Cat.1 #3 — header fire icon: demo renders it inline-block; our `.main-urgency i { float:left }`
   forces computed display:block (a float blockifies the element). Un-float it. */
#top-map {
    float: none;
    display: inline-block;
}

/* Cluster A — edit-cell pen: match demo (right-aligned in the 78px cell, 14px icon +5px
   left-pad = 19px wide, margin-right 20px). Our shared `.main-edit a { float:left }` floats
   it left and wide; un-float so the cell's text-align:right places it like the demo. */
#task-page .main-edit .sa-edit-pen {
    float: none;
    display: inline-block;
    margin: 0 20px 0 0;
    position: static;
    left: auto;
}
#task-page .main-edit .sa-edit-pen i {
    display: block;
    width: 14px;
    height: 14px;
    /* keep demo's 6px top/bottom icon padding so the pen is 26px tall and vertically
       centered in the row cell (an earlier 0-padding broke vertical centering) */
    padding: 6px 0 6px 5px;
}
/* Прямоугольная иконка комментариев ПЕРЕД карандашом (вид как B24 .dealicon). Un-float
   и то же вертикальное выравнивание, что у .sa-edit-pen; отступ справа отделяет от карандаша. */
#task-page .main-edit .sa-comments-icon {
    float: none;
    display: inline-block;
    margin: 0 12px 0 0;
    position: static;
    left: auto;
    color: #535c69;
    cursor: pointer;
}
#task-page .main-edit .sa-comments-icon:hover { color: #080; }
#task-page .main-edit .sa-comments-icon i {
    display: block;
    width: 14px;
    height: 14px;
    padding: 6px 0 6px 5px;
}

/* Календарь дедлайна (flatpickr) — убрать серую рамку 1px (у flatpickr это box-shadow #e6e6e6),
   оставив мягкую тень. Класс deadline-fp вешается в onOpen (standalone-tasks.js) — только этот
   инстанс, другие flatpickr не затрагиваются. */
.flatpickr-calendar.deadline-fp {
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08);
}
/* Убрать треугольник-стрелку flatpickr у календаря дедлайна — торчит над окном и мешает
   совпадению верха окна с верхом строки. */
.flatpickr-calendar.deadline-fp:before,
.flatpickr-calendar.deadline-fp:after {
    display: none;
}

/* Авто-попап комментария (#popup-comment): убрать серую рамку 1px (в общем style.css у него
   border:1px solid #d5dbdf — виден при выравнивании по строке). Только standalone (перебиваем
   style.css, т.к. standalone.css грузится позже); в B24 рамку не трогаем. Мягкая тень для отрыва. */
#popup-comment {
    border: none;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.08);
}

/* Task comments popup (standalone) — позиция/рамка как у #popup-comment; список прокручиваемый. */
#popup-task-comments {
    display: none;
    position: fixed;
    top: 61px;
    /* Правый край окна = 50px от края фрейма, как весь standalone-контент (#right-menu /
       .right-top-button-block / попап скачивания). Окно position:fixed → right отсчитывается
       от вьюпорта, per-container не нужен (в отличие от absolute-попапа скачивания). */
    right: 50px;
    width: 340px;
    box-sizing: border-box;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 999999999;
}
#popup-task-comments h2 {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 12px;
    text-align: center;
    line-height: 1em;
}
#task-comments-add { margin-bottom: 12px; }
#task-comment-new {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    resize: vertical;
    border: 1px solid #d5dbdf;
    border-radius: 5px;
    padding: 8px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    color: #535c69;
}
#task-comments-submit {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 8px;
    border: none;
    border-radius: 5px;
    background-color: #080;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background-color 0.2s;
}
#task-comments-submit:hover { background-color: #070; }
#task-comments-list {
    max-height: 40vh;
    overflow-y: auto;
    border-top: 1px dashed #d5dbdf;
    padding-top: 8px;
}
.task-comment-item { padding: 8px 0; border-bottom: 1px solid #eef0f2; }
.task-comment-item:last-child { border-bottom: none; }
.task-comment-text { color: #333; white-space: pre-wrap; word-break: break-word; }
.task-comment-meta { margin-top: 3px; font-size: 11px; color: #7e858e; }
.task-comments-empty { color: #7e858e; text-align: center; padding: 12px 0; }

/* Profile popup (standalone) — same visual family as #popup-task-comments (fixed, top 61 / right 50). */
#popup-profile {
    display: none;
    position: fixed;
    top: 50px;                    /* верх окна = нижняя граница тёмно-серого хедера */
    right: 50px;
    width: 520px;                 /* шире: данные в 2 колонки */
    max-width: calc(100vw - 100px);
    box-sizing: border-box;
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 999999999;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}
/* Заголовок как «Комментарий» (#popup-comment h2): крупный, жирный, uppercase. */
#popup-profile h2 { margin: 0 0 18px; font-size: 21px; font-weight: bold; text-transform: uppercase; line-height: 1em; color: #333; }
/* Верхний ряд: ФОТО слева, справа — Имя и Фамилия одно под другим. */
/* Между ПОЛЯМИ (по рамкам input) ровно 30px. Над каждым input сидит заголовок (16px + 4px = 20px),
   поэтому зазор блок-к-блоку = 10px, и от input до input получается 10 + 20 = 30px. */
#profile-top { display: flex; align-items: flex-start; gap: 50px; margin-bottom: 10px; }
#profile-name-block { flex: 1 1 auto; min-width: 0; }
#profile-name-block .profile-field:last-child { margin-bottom: 0; }
/* Кликабельный аватар: кружок-<label>, клик открывает выбор файла. Дефолт — иконка на сером;
   загруженное фото — object-fit cover. Hover: подсказка-камера + лёгкое затемнение. */
#profile-avatar-circle {
    flex: none; position: relative;
    margin-top: 20px;             /* опустить фото на 20px ниже — выровнять с полями справа */
    width: 84px; height: 84px; border-radius: 50%;
    background-color: #eef2f4; display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 30px; color: #9aa6b1; cursor: pointer;
}
#profile-avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
#profile-avatar-circle input { display: none; }
.profile-avatar-cam {
    position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(83, 92, 105, 0.72); color: #fff; font-size: 13px;
    opacity: 0; transition: opacity .15s;
}
#profile-avatar-circle:hover .profile-avatar-cam { opacity: 1; }
/* Нижний блок: Email + пароли в грид-раскладке 2 колонки (email — на всю ширину). */
#profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }   /* 10 + 20(заголовок) = 30px между input */
.profile-field { display: block; margin-bottom: 10px; }                            /* имя→фамилия: 10 + 20 = 30px между input */
.profile-field--wide { grid-column: 1 / -1; }
#profile-grid .profile-field { margin-bottom: 0; }
.profile-field span { display: block; margin-bottom: 4px; font-size: 13px; color: #7a828b; }
.profile-field input {
    box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px;
    border: 1px solid #d5dbe0; border-radius: 5px; font-size: 14px; font-family: inherit;
}
.profile-field input[readonly] { background-color: #f4f6f8; color: #9aa6b1; cursor: default; }
/* Кнопка «Сохранить» — на 12px ниже последнего поля (тот же вертикальный ритм, что между полями:
   grid gap 12px). Зона сообщения ПОД кнопкой — зарезервирована по высоте (min-height), «Сохранено»/
   ошибка пароля появляется БЕЗ прыжка высоты; вертикальный отступ сверху 12px, как у наименований
   полей (gap между строками). Ошибки файла — всплывающим alert (см. JS). */
/* «Сохранено» — НАД кнопкой, в зарезервированной зоне, вписанной в 36px-разрыв (9 + 18 + 9),
   поэтому от последнего поля до кнопки ровно 36px и высота окна НЕ меняется при появлении текста. */
#profile-message { min-height: 18px; margin: 8px 0 4px 0; font-size: 13px; line-height: 18px; }
#profile-save {
    display: block; width: 100%; height: 40px; margin-top: 0; border: none; border-radius: 5px;
    background-color: #080; color: #fff; text-transform: uppercase; cursor: pointer;
    font-family: inherit; font-size: 13px; transition: background-color 0.2s;
}
#profile-save:hover { background-color: #070; }
#profile-save:disabled { opacity: .6; cursor: default; }
/* Аватар в ХЕДЕРЕ: серый круг с иконкой по умолчанию, фото после загрузки (30px). */
#right-menu-user-photo {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background-color: #eef2f4; display: flex; align-items: center; justify-content: center;
    color: #9aa6b1; font-size: 14px;
}
#right-menu-user-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cluster B — time group: demo gets 4px between play/fact/sep/plan from inline whitespace
   in its HTML; our jQuery-built DOM has none, so add explicit 4px left margins. */
#task-page .main-time .time-fact { margin-left: 4px; }
#task-page .main-time .time-sep  { margin-left: 4px; }
#task-page .main-time .time-plan { margin-left: 4px; }

/* Defect 3 — time-plan input: demo renders 16px tall (border-box); our shared style.css
   leaves it content-box with auto height (17px, Inter line box). Pin to demo's 16px. */
#task-page .time-plan { box-sizing: border-box; height: 16px; }

/* Defect 2 — name→"изменить" had a 3px vertical gap: the inline-block name sits in a line
   box whose strut uses #tracker-user-info's "normal" line-height (taller in Inter), pushing
   the block "изменить" down 3px. Make the name block so there's no inline line box.
   (standalone-only; Bitrix uses its own cascade.) */
#tracker-user-name { display: block; }

/* Wave 1.2 — title edit: no blue browser focus ring on the contenteditable title
   (B24 edits via an <input> with outline:none; we keep contenteditable + suppress the ring). */
#task-page .task-description:focus { outline: none; }
/* keep the title selectable/editable despite jQuery-UI disableSelection() on #tracker-tbody */
#task-page .task-description { -webkit-user-select: text; user-select: text; }

/* ─────────────────────────────────────────────────────────────────────────
   D1 PRAVKA 1 & 3 — active-task green bar must NOT shift row content.
   B24 (css/style.css) draws the bar as `.time-active { border-left:5px }` on the
   row, which pushes ALL content (last-comment, bookmark flag) 5px right, and adds
   per-icon compensation paddings that further move the flag. We re-draw the bar as
   an absolutely-positioned ::before so the row content stays put whether the row is
   active or not. standalone only — Bitrix keeps its border-left behaviour.
   ───────────────────────────────────────────────────────────────────────── */
#task-page .tracker-tr { position: relative; }
#task-page .tracker-tr.time-active {
    border-left: 0;            /* remove the flow-shifting border */
    animation: none;           /* its border-color blink no longer applies */
}
#task-page .tracker-tr.time-active::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: #080;
    animation: sa-active-blink 1s infinite cubic-bezier(1, 0, 0, 1);
    z-index: 3;
    pointer-events: none;
}
@keyframes sa-active-blink { from { background: #fff; } to { background: #080; } }
/* Зелёная полоса активной задачи — absolute ::before с z-index:3, поэтому её белая фаза мигания
   пробивалась ПОВЕРХ серого оверлея #bg (у #bg в style.css нет z-index = auto/0). Поднимаем #bg
   выше: оверлей перекрывает полосу (как в B24, где полоса — обычный border без z-index).
   z-index:100 (а не 4), потому что на Отчётах красная линия курсора #cursor-line имеет z-index:99
   (worktime.css) и при открытом окне редактирования пробивалась ПОВЕРХ серого оверлея. Со 100
   оверлей накрывает весь контент отчёта (91/92/99), но остаётся НИЖЕ попапов (999999999) и
   календаря flatpickr (1000000001); выпадашки #te-tag-list/#te-resp-list лежат ВНУТРИ попапа,
   т.е. в его stacking-контексте, и от этого не зависят. #user-menu перед показом #bg закрывается.
   Только standalone (standalone.css не грузится в B24). */
#bg { z-index: 100; }

/* PRAVKA 3 — flag stays put when active: neutralise B24's compensation rules
   (.time-active i.fa-ellipsis-v{padding-left:10!important}, .time-active .before-task
   {padding-left:10;width:28}) so the flag matches its inactive position. */
#task-page .tracker-tr.time-active i.fa-ellipsis-v { padding-left: 15px !important; }
#task-page .tracker-tr.time-active i.fa-bookmark    { padding-left: 12px !important; }
#task-page .tracker-tr.time-active .before-task     { width: 33px !important; }

/* PRAVKA 1 — last-comment left edge fixed to the task-text left edge (33px),
   independent of active state (no longer riding the 5px border). */
#task-page .last-comment { padding-left: 33px; }

/* ─────────────────────────────────────────────────────────────────────────
   Employee selector dropdown (standalone "view another user's tasks").
   Ported from the demo's .list styles (our app's style.css uses #tracker-user-search
   instead). The dropdown anchors to .right-top-button-block, which is ALREADY
   position:absolute in the shared style.css — so we must NOT override it to relative
   (that dropped the whole block out of the bar). The dropdown opens below the fixed
   36px bar, so #tracker-top must not clip it (overflow:visible; height stays fixed). */
#task-page #tracker-top { overflow: visible; }
#tracker-user-list.list {
    display: none;
    position: absolute;
    top: 51px;                 /* top edge aligned with #tracker-thead (block top 110 + 51 = 161) */
    right: 0;
    z-index: 6;
    color: #535c69;
    min-width: 220px;
    padding: 10px 15px;
    border-radius: 0 5px 5px 5px;/* left-top square (merges with header row); right-top + both bottom rounded, like the original .list */
    background-color: #eef2f4; /* same grey as #tracker-thead → looks continuous */
    /* no box-shadow — flush with the headers, like the demo */
}
#tracker-user-list .list-rhomb { display: none; }   /* no pointer — dropdown merges with the header row */
#tracker-user-list .list-search-input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    border: 1px solid #d5dbdf;
    border-radius: 5px;
    margin: 8px 0 18px 0;
    padding: 0 14px;
    outline: none;
}
#tracker-user-list .list-search-input:hover { border-color: #c3c9cd; }
#tracker-user-list .list-items { border-top: 1px dashed #d5dbdf; padding: 10px 0; }
#tracker-user-list .list-item {
    padding: 0 15px;
    line-height: 2em;
    cursor: pointer;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tracker-user-list .list-item:hover { background-color: #d5dbdf; }
#tracker-user-list .list-item-self { font-weight: 600; }

/* READ-ONLY mode (viewing another user's tasks): row controls visible but inert,
   add-controls hidden via JS. Belt-and-suspenders over the JS handler guards. */
#task-page.readonly-view .main-td-options,
#task-page.readonly-view .before-task { pointer-events: none; }
#task-page.readonly-view .task-text   { cursor: default; }

/* Item 3 — uniform row hover: B24/demo only grey the .urgency/.meeting cells, so plain
   rows never highlight. Make EVERY task row highlight light-grey on hover (dividers keep
   their own blue hover via the shared !important rule). */
#task-page #tracker-tbody .tracker-tr:hover { background: #f7f9fa; }

/* Item 5 — "мои задачи | изменить" links under the name. Style «мои задачи» + separator
   to match #tracker-user-change (small, muted, clickable). */
#tracker-user-mine, #tracker-user-sep {
    height: 18px;
    line-height: 18px;
    font-size: 0.75rem;
    opacity: 0.5;
}
#tracker-user-mine { cursor: pointer; }
/* Item 1 — hover affects ONLY the hovered link, not the whole user block.
   Cancel the shared `#tracker-user:hover #tracker-user-change` block-brightening
   (and the same for «мои задачи»), then brighten ONLY the link under the cursor. */
#task-page #tracker-user:hover #tracker-user-mine,
#task-page #tracker-user:hover #tracker-user-change { opacity: 0.5; }
#task-page #tracker-user-mine:hover,
#task-page #tracker-user-change:hover { opacity: 1 !important; }

/* ── Final left alignment to the «Задачи (N)» header label (exactly 87px) ──────────
   Row left edge = 50; 87 = 50 + 37. */

/* (ref) «Задачи (N)» label: lands at 87.4 from the bookmark icon + whitespace — nudge to exactly 87
   (no change to #top-bookmark, so the flag stays put). */
#task-page #task-count-label { position: relative; left: -0.45px; }

/* Task titles: .task-text sits at 83 (50 + before-task handle 33); pad +4 so the title text
   aligns to the label at 87. Both modes (own + read-only). */
#task-page .main-task .task-text { padding-left: 4px; }

/* Current-task indicator: read-only ONLY → align to 87. In read-only #add-task/#add-razdelitel are
   display:none so it collapses to 50; pad +37 → 87 (matches the header). Own mode untouched
   (no padding; stays at 336 on the bar's line with the input fields). */
#task-page.readonly-view #timing-task-text-top { padding-left: 37px; }

/* Read-only (viewing another user): hide icons that don't work there. Use visibility:hidden (NOT
   display:none) so the row geometry is preserved — especially .before-task, a float:left 33px handle
   that fixes the title's 87px position; collapsing it would break the alignment. Data indicators
   (time-fact, time-plan, deadline date, fire/geolocation) stay visible — they show the employee's
   task info, just not clickable. */
#task-page.readonly-view .before-task,
#task-page.readonly-view .main-edit .sa-edit-pen,
#task-page.readonly-view .start-timing i,
#task-page.readonly-view .main-close .fa-check,
#task-page.readonly-view .razdelitel-close .fa-times {
    visibility: hidden;
}

/* Comment popup: #comment-text (shared style.css: width 264 + padding 30 + border 2) defaults
   to content-box, so it rendered 296px and overflowed the 266px popup content area by 16px —
   "кривая" layout. The embedded Bitrix portal supplies a global box-sizing reset so it looks
   fine there; standalone has none. Force border-box (like #comment-submit already is) so the
   textarea fits the popup exactly. Standalone-only — B24 untouched. */
#popup-comment #comment-text { box-sizing: border-box; }

/* ═════════════════════════════════════════════════════════════════════════
   ОТЧЁТЫ standalone — остаточные точечные правки (Quirks Mode + боковой инсет 50).
   Эталон — ДЕМО (demo/); значения/механизмы взяты из демо и адаптированы под наш
   инсет 50px. Инсет НЕ меняем. Только standalone; Bitrix не затрагивается.
   ═════════════════════════════════════════════════════════════════════════ */

/* П.1/П.4 — область «Кликните, чтобы вернуться» (#report-timeline-hide-area):
   на всю ширину окна И приклеена к низу экрана, как в демо.
   В демо это отдельный элемент `#hide-area { position:fixed; bottom:0; left:0; width:100% }` —
   фиксирован к низу вьюпорта, на всю ширину. Наш элемент (в потоке, relative, с инсет-полями)
   воспроизводим тем же механизмом: fixed + bottom:0 + left:0 + width:100%. left:0/width:100%
   дают полную ширину независимо от инсета 50; margin обнуляем (в base был -20/28). Только standalone. */
#timing-page #report-timeline-hide-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
}

/* П.1(доп) — подписи времени/надписи на карточке-курсоре (#screenshots-task) в верхнем окне.
   Демо (script.js): marginLeft = clientX - 35 при инсете 30 → надпись под курсором/линией.
   Наш Vue: marginLeft = clientX - 25 относительно контейнера на инсете 50 → карточка на +30px
   правее линии курсора (которую мы уже сдвинули на -30). Сдвигаем карточку так же на -30px,
   чтобы время/надписи встали под линию курсора и деления, как в демо. */
#timing-page #screenshots-task {
    transform: translateX(-30px);
}
/* П.1(fix) — при курсоре в ПРАВОЙ половине карточка получает класс .right и в base
   worktime.css сдвигается на translate(-850px) (контент уходит ВЛЕВО от курсора). Наш
   #timing-page #screenshots-task{translateX(-30px)} той же специфичности перебивал этот
   -850 → правое состояние ломалось, левые надписи обрезались (#screenshots overflow:hidden).
   Даём более специфичное правило для .right, КОМПОНУЯ обе величины: -850 (флип) + -30 (инсет). */
#timing-page #screenshots-task.right {
    transform: translateX(-880px);
}

/* П.2 — красная линия курсора (#cursor-line) точно под курсором.
   Демо (js/script.js): left = e.clientX - 30 при инсете 30 → линия ровно под курсором.
   Наш Vue: left = clientX - 20 относительно #report-timeline-wrap, а wrap смещён нашим
   инсетом на 50 → линия оказывается на +30px правее курсора. Сдвигаем на -30px
   (= wrap.left 50 − код-константа 20), чтобы линия встала под курсор, как в демо. */
#timing-page #cursor-line {
    transform: translateX(-30px);
}

/* П.4 — кнопки «настройки»/«инфо» = 36px как в демо (у «настроек» было 37).
   Демо-inner = 36 (иконка 16 + padding 10/10). У «настроек» строчный бокс fa-cog даёт 17
   (метрики нашего font-awesome2 vs демовского font-awesome отличаются на 1px), из-за чего
   inner 37. Фиксируем высоту контента inner ровно в 16px (content-box в Quirks → 16 + 20 = 36),
   т.е. в размер как в демо. line-height:16 держит иконку по центру строки. */
#timing-page .report-buttons .top-button-inner {
    height: 16px;
    line-height: 16px;
}

/* П.5 — зазор дата→время в окне добавления задачи = 16px как в демо (у нас было 6).
   CSS одинаковый, КРОМE одного правила: в демо `.popup-task-date, .popup-task-resp`
   имеют margin-bottom:10px, а в нашем worktime.css это правило потеряно. Возвращаем
   демо-значение — зазор становится 16 как в эталоне. */
#timing-page .popup-task-date,
#timing-page .popup-task-resp {
    margin-bottom: 10px;
}

/* П.3 — отступ списка задач в окне добавления = как в демо (40px).
   Демо `.popup-task-item { padding-left: 40px }`; у нас правила нет, и элемент наследует
   `.list-item { padding: 0 15px }` → 15px. Возвращаем демо-значение 40px, список встаёт
   с тем же отступом, что в эталоне. */
#timing-page .popup-task-item {
    padding-left: 40px;
}

/* Попап «Скачать приложение» (#desktop-app-popup): правый край выровнять по остальному
   standalone-контенту (всё на 50px от края фрейма: #info/.right-top-button-block/#tracker-tbody/
   таблица отчёта). Значение right зависит от КОНТЕЙНЕРА попапа, а он на разных вкладках разный:
   - Задачи: попап телепортится в #task-page (контейнер у края фрейма) → right:50px = 50px от края.
   - Отчёты/скрины/пр.: попап в <main> внутри #timing-page (у #timing-page padding-right:50px, main
     уже отступает на 50px) → right:0 совмещает правый край попапа с краем контента (тоже 50px от края).
   worktime.css ставит 20px под B24 (.header-wrapper padding 0 20px) — там НЕ трогаем; standalone.css
   грузится последней и перебивает без !important. Меняем только right; ряд иконок/видео-попап
   (центрированы отдельными правилами) и прочие попапы не затрагиваются. */
#task-page #desktop-app-popup {
    right: 50px;
}
#timing-page #desktop-app-popup {
    right: 0;
}

/* ── Шестерёнка настроек в шапке таблицы задач (#tracker-thead .main-close) ──────────────
   Иконка ПО ЦЕНТРУ последней ячейки (над галочками). Меню НЕ позиционируем от wrap — он inline,
   поэтому абсолютное меню цепляется за #tracker-thead (position:relative), раскрывается ВНИЗ и
   СТЫКУЕТСЯ с шапкой (top:100% = низ шапки, серый #eef2f4 как у #tracker-thead — сплошной блок,
   как у шестерёнки главного меню). Только standalone. */
#task-page #tracker-thead .main-close {
    overflow: visible;
    /* width: 50px; убрана фиксированная ширина (была в shared style.css) */
    width: auto;
    float: right;
    padding: 0;
}
#thead-gear-wrap { display: inline; }   /* не positioned → меню цепляется за #tracker-thead */
#thead-gear-toggle {
    display: inline-block;
    cursor: pointer;
    color: #acb6bf;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 36px;       /* вертикальный центр в шапке (36px) */
    font-size: 14px;
    transition: color 0.15s;
}
#thead-gear-toggle:hover { color: #535c69; }
#thead-gear-menu {
    display: none;
    position: absolute;
    top: 100%;               /* низ шапки → стыковка без зазора */
    right: 0;                /* правый край таблицы (как у главного меню) */
    width: 260px;
    box-sizing: border-box;
    padding: 30px;
    background-color: #eef2f4;    /* тот же серый, что #tracker-thead → сплошной блок */
    color: #535c69;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.35);
    text-align: left;
    font-weight: normal;
    z-index: 100;
    cursor: default;
}
#thead-gear-menu .thead-gear-setting { display: flex; align-items: flex-start; cursor: pointer; font-size: 1em; }
#thead-gear-menu .thead-gear-setting span { margin-top: -1px; line-height: 1.3; }
#thead-gear-menu input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: none;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    background-color: #fff;
    border: 1px solid #acb6bf;
    border-radius: 4px;
    cursor: pointer;
}
#thead-gear-menu input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 7px;
    border: solid #535c69;
    border-width: 0 3px 3px 0;
    border-radius: 2px;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* ===== Единое окно РЕДАКТИРОВАНИЯ задачи (Отчёты: клик по названию; Задачи: карандаш) =====
   Механизм и вид — как у #popup-profile: fixed + оверлей #bg + slideDown из JS. */
#popup-task-edit {
    display: none;
    position: fixed;
    top: 50px;
    right: 50px;
    width: 520px;
    max-width: calc(100vw - 100px);
    box-sizing: border-box;
    padding: 30px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 999999999;
    max-height: calc(100vh - 70px);
    overflow: visible;
}
#popup-task-edit h2 {
    margin: 0 0 20px 0;
    font-size: 21px;
    font-weight: bold;
    text-transform: uppercase;
    color: #535c69;
}
.te-field { display: block; margin-bottom: 0; position: relative; }
.te-field > span {
    display: block;
    height: 16px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 16px;
    color: #a9adb4;
}
.te-field input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e3e7ea;
    border-radius: 3px;
    background: #fff;
    font-size: 15px;
    color: #535c69;
    outline: none;
}
.te-field input[type="text"]:focus { border-color: #a9adb4; }
#te-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; }
.te-field--wide { grid-column: 1 / -1; margin-bottom: 15px; }   /* столько же, сколько row-gap грида */
/* Тег — как в отчётах: цветная плашка, клик открывает список */
.te-tag {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    background: #8F2346;
}
#te-tag-list {
    display: none;
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;               /* фактический top ставит JS: низ инпута + 2px (грид растягивает .te-field) */
    box-sizing: border-box;   /* иначе width:100% + рамка = вылет вправо */
    width: 100%;
    border: 1px solid #fff;   /* белая рамка вокруг списка */
    border-radius: 3px;
    overflow: hidden;         /* скругление на цветных пунктах; серой рамки/тени НЕТ */
}
#te-tag-list .te-tag-item { padding: 6px 10px; cursor: pointer; color: #fff; text-align: center; border-bottom: 1px solid #fff; }
#te-tag-list .te-tag-item:last-child { border-bottom: 0; }
#te-tag-list .te-tag-item { position: relative; }
/* hover — именно ДРУГОЙ (более тёмный) цвет, без прозрачности: затемняющий слой поверх заливки */
#te-tag-list .te-tag-item:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    pointer-events: none;
}
/* Иконки срочности/локации — те же цвета, что на Задачах */
#te-icons { margin: 15px 0 0 0; display: flex; gap: 30px; }
.te-icon { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: #a9adb4; font-size: 14px; }
.te-icon i { font-size: 18px; }
.te-icon.on { color: #535c69; }
.te-icon:hover,
.te-icon:hover i { color: #535c69; }
#te-message { min-height: 0; margin: 0; font-size: 13px; line-height: 18px; color: #0a0; }
#te-message.err { color: #d64550; }
#te-save {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 25px;
    border: 0;
    border-radius: 3px;
    background: #080;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
#te-save[disabled] { background: #a9adb4; cursor: default; }

/* --- 10: крестик закрытия --- */
#popup-task-edit #te-close {
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 0 0 30px 30px;   /* зона наведения шире: 30px слева и снизу; глиф остаётся в 30px от угла */
    font-size: 18px;
    line-height: 1;
    color: #a9adb4;
    cursor: pointer;
}
#popup-task-edit #te-close:hover { color: #535c69; }

/* --- 3: пустое состояние тега --- */
#te-tag.te-tag--empty { background: #a9adb4; }

/* --- 5/6: Ответственный — поле-фильтр + список НИЖЕ поля (как #tracker-user-list на Задачах).
   Симметричные паддинги: стрелка нарисована фоном и отступает от правого края так же, как текст слева. */
#popup-task-edit #te-responsible {
    padding: 0 10px;                       /* padding справа = слева; стрелка учитывает его (см. background-position) */
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a9adb4' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* те же 10px, что и слева */
    cursor: pointer;
}
#te-resp-list {
    display: none;
    position: absolute;
    left: 0;
    top: 0;                                 /* фактический top ставит JS: низ инпута + 2px */
    z-index: 6;
    box-sizing: border-box;
    width: 100%;
    max-height: 108px;                      /* ~3 пользователя, дальше скролл */
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3e7ea;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#te-resp-list .list-item {
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #535c69;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#te-resp-list .list-item:hover,
#te-resp-list .list-item.selected { background: #f2f5f7; }

/* --- 7: календарь дедлайна ДОЛЖЕН быть НАД окном редактирования (у окна z-index 999999999) --- */
.flatpickr-calendar { z-index: 1000000001 !important; }
/* Календарь, открытый из окна редактирования, — на 3px выше (flatpickr ставит top инлайном) */
.flatpickr-calendar.te-fp { margin-top: -3px; }

/* ============================================================================
   Анимация загрузки: в автономном режиме — 400px от верха (в B24 база 250px, задана
   в worktime.css). standalone.css грузится только в автономном режиме и ПОСЛЕ worktime.css,
   специфичность та же (#loader) → перебивает базу. Горизонталь не трогаем — центр держит
   align-items:center у #loader.
   ============================================================================ */
#loader {
    top: 400px;
}