/**
 * Раздел «Задачи» (плагин kolab/tasklist) под скин Litecube-f.
 *
 * Плагин приходит с оформлением скина Larry: свой мелкий серый спрайт
 * (plugins/tasklist/skins/<скин>/images/buttons.png) и раскладка тулбара, рассчитанная
 * на широкую панель. Скин Litecube-f подменяет спрайт только у общих
 * элементов (.toolbar a.button), но правила плагина сильнее по специфичности
 * (#taskstoolbar a.button.print), поэтому Задачи оставались «ларриевскими»,
 * пока остальные разделы выглядели по-своему.
 *
 * Ниже кнопки тулбара пересаживаются на спрайт скина — тот же файл и те же
 * координаты, что использует Почта, поэтому иконки совпадают с остальным
 * интерфейсом. Координаты сверены попиксельно по границам непрозрачных
 * областей спрайта, а не подобраны на глаз.
 */

/* --- иконки: спрайт скина вместо спрайта плагина --- */
#taskstoolbar a.button.newtask,
#taskstoolbar a.button.print,
#taskstoolbar a.button.import,
#taskstoolbar a.button.export {
	background-image: url(../images/buttons.png) !important;
	background-repeat: no-repeat !important;
}

/* «Новая задача» — карандаш с зелёным плюсом.
   Взята из блока крупных иконок (шаг 40px): в блоке мелких, где лежит ⊕ (-357),
   соседняя иконка отстоит на 20px и попадала в ту же кнопку — отсюда «две
   картинки вместо одной». Иконка смещена влево (X 15..30 при ширине 52),
   поэтому центрируется через calc. */
#taskstoolbar a.button.newtask { background-position: calc(50% + 4px) -1135px !important; }
#taskstoolbar a.button.print   { background-position: center -810px !important; }
#taskstoolbar a.button.import  { background-position: center -1012px !important; }
#taskstoolbar a.button.export  { background-position: center -1054px !important; }

/* --- раскладка: четыре кнопки обязаны уместиться в сайдбар шириной 240px ---
   Larry задаёт export min-width:50px/max-width:70px; вместе с padding скина
   это давало суммарно больше 240px, и подписи наезжали друг на друга.

   🔴 box-sizing здесь задавать НЕЛЬЗЯ. Larry описывает кнопку в модели content-box:
   height:13px — это высота ОДНОЙ строки подписи, а иконка живёт в padding-top.
   Переключение на border-box схлопывает всю кнопку до 13px, padding съедает её
   целиком: подписи пропадают, а иконки обрезаются до верхних пикселей. */
#taskstoolbar {
	padding: 0 2px;
}

#taskstoolbar a.button {
	min-width: 0 !important;
	max-width: none !important;
	width: 46px !important;   /* пять кнопок (появилась «Доска») в сайдбар 240px */
	margin: 0 !important;
	padding: 24px 0 0 0 !important;
	font-size: 9px;
	line-height: 12px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* --- Строка «Создать новую задачу»: по центру и по ширине подсказки ---
   Larry растягивает поле на 60% ширины окна (#quickaddbox width:60%,
   #quickaddinput width:85%) — на широком мониторе получается полоса
   через пол-экрана. Здесь блок центрируется, а поле сужается до длины
   собственной подсказки.
   Правое поле в 250px оставлено НЕ на глаз: #quicksearchbar занимает
   right:2px + width:240px, и без этого запаса центрированная строка
   наехала бы на поиск. */
#quickaddbox {
	left: 0 !important;
	right: 250px !important;
	width: auto !important;
	text-align: center;
}

#quickaddinput {
	width: 54ch !important;          /* длина подсказки «Создать новую задачу (пример: …)» */
	max-width: calc(100% - 70px);    /* на узком окне уступает место кнопке «+» */
}

/* =====================================================================
   ВКЛАДКА «ПОЧТА» — оформление в духе Outlook for Mac 16.93
   ---------------------------------------------------------------------
   Правится ТОЛЬКО почта: все селекторы ниже начинаются с узлов, которые
   существуют лишь в разделе Mail (#mailboxlist, #mailview-*, .messagelist,
   #messagetoolbar). Календарь, Задачи и Контакты не затрагиваются.

   Палитра снята с эталонного скриншота Outlook, а не выдумана:
     текст основной   #201f1e     вторичный      #605e5c
     разделитель      #edebe9     наведение      #f3f2f1
     выделение        #cfe4fa     акцент/новое   #0f6cbd
   Цвет намеренно не берётся из темы скина (xcolor-*): Outlook узнаваем
   именно этой нейтрально-синей гаммой, а тема скина даёт шесть разных.
   ===================================================================== */

/* --- контейнеры: убрать ларриевскую рамку и скругление коробок --- */
#mailboxcontainer.uibox,
#mailview-top.uibox,
#mailview-bottom.uibox {
	border: 1px solid #edebe9 !important;
	border-radius: 6px !important;
	background: #fff !important;
	box-shadow: none !important;
}

/* --- заголовки коробок: вместо голубой плашки Larry — светлая шапка --- */
#mailview-left .boxtitle,
#mailview-right .boxtitle {
	background: #fff !important;
	color: #201f1e !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border-bottom: 1px solid #edebe9 !important;
	padding: 10px 12px 9px 12px !important;
}

/* --- левая панель папок --- */
#mailboxlist li.mailbox > a {
	font-size: 13px !important;
	color: #201f1e !important;
	/* 🔴 Высота строки жёстко ограничена 23px, и это не про эстетику.
	   Иконку папки рисует спрайт listicons.png, где иконки идут с шагом
	   24px. Фон рисуется на всю высоту ссылки, поэтому строка выше 23px
	   показывает верхушку СЛЕДУЮЩЕЙ иконки — она и выглядела как чёрточка
	   под папкой. Мои прежние 7px+7px давали 31px, то есть 7 лишних
	   пикселей чужой иконки. Менять padding здесь можно только вместе
	   с line-height, сохраняя сумму ≤ 23px. */
	padding: 3px 8px 3px 30px !important;
	line-height: 17px !important;
	height: 17px !important;
	border-radius: 6px !important;
	border: 0 !important;
	background-repeat: no-repeat !important;
}

/* 🔴 СТУПЕНЬКА ВЛОЖЕННОСТИ. Правило выше задаёт padding-left: 30px с
   !important и тем самым перебивает лесенку скина (Larry, styles.css:
   36 → 52 → 68 → 84 → 100, шаг 16px). Положение значка при этом остаётся
   скиновым (6 → 22 → 38 → 54 → 70), и получалось так: у вложенной папки
   значок стоит правее начала текста и налезает на первую букву, а сами
   уровни выстраиваются в один столбец. Замерено на копии списка папок
   (та же разметка ядра, тот же скин, тот же спрайт): padding-left был
   30px на ВСЕХ уровнях, текст начинался с 40px и у первого, и у четвёртого.

   🔑 Правило геометрии: текст начинается на 24px правее значка. Для
   верхнего уровня это даёт привычные 30px (6 + 24) — тот вид, который
   Владимир принял, — поэтому ступеньки ниже считаются от него, а не
   подбираются на глаз. Шаг 16px взят у скина: он же задаёт положение
   значков, и разойтись эти два ряда чисел не должны. */
#mailboxlist li.mailbox ul li.mailbox > a {
	padding-left: 46px !important;      /* значок 22 + 24 */
}

#mailboxlist li.mailbox ul ul li.mailbox > a {
	padding-left: 62px !important;      /* значок 38 + 24 */
}

#mailboxlist li.mailbox ul ul ul li.mailbox > a {
	padding-left: 78px !important;      /* значок 54 + 24 */
}

#mailboxlist li.mailbox ul ul ul ul li.mailbox > a {
	padding-left: 94px !important;      /* значок 70 + 24 */
}

#mailboxlist li.mailbox > a:hover {
	background-color: #f3f2f1 !important;
}

#mailboxlist li.mailbox.selected > a,
#mailboxlist li.mailbox > a:focus {
	background-color: #cfe4fa !important;
	color: #201f1e !important;
	font-weight: 600 !important;
}

#mailboxlist li.mailbox .unreadcount {
	background: transparent !important;
	color: #0f6cbd !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	box-shadow: none !important;
}

/* --- шапка списка писем (папка + фильтр) --- */
#messagelistheader {
	background: #fff !important;
	border-bottom: 1px solid #edebe9 !important;
}

/* --- строка письма ---
   В режиме widescreen ядро складывает отправителя, тему и дату в одну
   ячейку .subject (app.js: cells fromto/date/size/status/subject),
   поэтому «двухстрочная карточка» Outlook собирается из span-ов, а не
   из колонок таблицы. */
.messagelist tbody tr.message > td {
	border-bottom: 1px solid #edebe9 !important;
	border-left: 0 !important;
	padding: 7px 10px !important;
	background-image: none !important;
}

.messagelist tbody tr.message:hover > td {
	background-color: #f3f2f1 !important;
}

.messagelist tbody tr.message.selected > td,
.messagelist tbody tr.message.focused > td {
	background-color: #cfe4fa !important;
	background-image: none !important;
	color: #201f1e !important;
}

.messagelist tbody tr.message.selected > td a,
.messagelist tbody tr.message.selected > td span {
	color: #201f1e !important;
}

/* отправитель — первая строка, тёмная и плотная */
.widescreen .messagelist td.subject span.fromto,
.messagelist td.fromto {
	display: block;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #201f1e !important;
	line-height: 18px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* тема — вторая строка, спокойнее по весу и цвету.
   Целимся в span.subject: в widescreen ядро кладёт тему именно в него
   (app.js: widescreen_message_row строит span на каждую ячейку шаблона),
   а ссылка <a> лежит уже внутри и наследует цвет. */
.widescreen .messagelist td.subject span.subject {
	display: block;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	color: #605e5c !important;
	line-height: 17px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* дата — вправо, к строке отправителя */
.widescreen .messagelist td.subject span.date,
.messagelist td.date {
	float: right;
	font-size: 11px !important;
	color: #605e5c !important;
	font-weight: 400 !important;
	padding-left: 8px;
	line-height: 18px !important;
}

/* ссылка внутри темы не должна спорить с цветом строки */
.widescreen .messagelist td.subject span.subject a {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
}

/* размер письма в строке не нужен — в Outlook его нет */
.widescreen .messagelist td.subject span.size {
	display: none !important;
}

/* непрочитанное: синяя полоса слева и акцентный отправитель,
   вместо сплошного жирного шрифта на всю строку */
.messagelist tbody tr.message.unread > td {
	font-weight: 400 !important;
	box-shadow: inset 3px 0 0 0 #0f6cbd;
}

.widescreen .messagelist tr.unread td.subject span.fromto {
	font-weight: 700 !important;
	color: #0f6cbd !important;
}

.widescreen .messagelist tr.unread td.subject span.subject,
.widescreen .messagelist tr.unread td.subject span.subject a {
	color: #201f1e !important;
	font-weight: 600 !important;
}

/* --- тулбар почты: плоские кнопки, как в Outlook --- */
#messagetoolbar {
	background: #fff !important;
	border-bottom: 1px solid #edebe9 !important;
}

#messagetoolbar a.button {
	color: #201f1e !important;
	border-radius: 6px !important;
}

#messagetoolbar a.button:hover {
	background-color: #f3f2f1 !important;
}

/* --- область чтения --- */
#mailpreviewframe {
	background: #fff !important;
}

/* --- «парящие» панели: серая подложка, белые карточки ---------------
   В Outlook левая колонка сливается с фоном окна, а список и область
   чтения лежат на нём белыми карточками с мягкой тенью.

   Подложка красится через :has() — это единственный способ ограничить
   правило разделом Почты: #mainscreen общий для всех задач, а класса
   вида task-mail ни ядро, ни Larry, ни xskin на <body> не вешают
   (проверено). Firefox 121+/Chrome 105+ :has() понимают; там, где не
   понимают, правило просто игнорируется и вид остаётся прежним. */
#mainscreen:has(#mailview-left) {
	background: #f3f2f1 !important;
}

/* левая колонка — часть подложки, а не отдельная коробка */
#mailview-left,
#mailboxcontainer.uibox {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#mailview-left .boxtitle {
	background: transparent !important;
	border-bottom: 0 !important;
	color: #605e5c !important;
	font-size: 12px !important;
	text-transform: uppercase;
	letter-spacing: .3px;
}

/* список и чтение — белые карточки, которые «парят» над подложкой */
#mailview-top.uibox,
#mailview-bottom.uibox {
	background: #fff !important;
	border: 1px solid #e6e4e2 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05) !important;
}

/* разделители между колонками не должны рисовать своих полос:
   зазор между карточками и есть граница */
#mailviewsplitter,
#mailviewsplitter2 {
	background: transparent !important;
	border: 0 !important;
}

/* --- верхняя строка приложения: синяя, как заголовок окна Outlook -----
   #topline — это полоса с «О программе» слева и адресом ящика справа.
   Она общая для всех разделов, отдельного «почтового» варианта у неё нет,
   поэтому синей она станет и в Календаре, и в Задачах — иначе цвет прыгал
   бы при переключении вкладок, что выглядит как дефект.
   Панель вкладок (#taskbar) намеренно не трогаем. */
#topline,
.minimal #topline {
	background: #0f6cbd !important;
	border-bottom: 0 !important;
	color: #fff !important;
}

#topline a,
#topline span,
#topline span.username,
#topline .topleft a {
	color: #fff !important;
}

#topline a:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

/* --- кнопка «Выход» ---
   🔴 Прежний приём был негодным и дал «дыру»: я красил значок фильтром
   `brightness(0) invert(1)`, а фильтр применяется ко ВСЕЙ картинке.
   Замер файла: icon-logout-min.png — 16×14, непрозрачных точек 206 из 224,
   то есть это почти сплошная плитка. Инверсия делала её целиком БЕЛОЙ —
   на синей полосе получался белый прямоугольник (Владимир, 19.08.2026).

   🔑 Лечение: свой значок прямо в стиле (SVG в адресе data:), белый контур
   толщиной 1.6 — «дверь со стрелкой наружу». Он не зависит от того, как
   нарисована картинка скина, чёткий на любом увеличении и весит 320 байт.
   Отступ слева 20px — тот же, что у Larry, чтобы текст не наезжал. */
#topline a.button-logout {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 2.6H3.6a1 1 0 0 0-1 1v8.8a1 1 0 0 0 1 1h2.6'/%3E%3Cpath d='M10.6 11.2 13.8 8 10.6 4.8'/%3E%3Cpath d='M13.8 8H6.6'/%3E%3C/svg%3E") no-repeat left center !important;
	background-size: 14px 14px !important;
	padding: 2px 10px 2px 20px !important;
	filter: none !important;
}

/* --- полоса кнопок почты: та же серая подложка, что под панелями --- */
#messagetoolbar {
	background: #f3f2f1 !important;
	border-bottom: 1px solid #e6e4e2 !important;
}

/* --- полоса с логотипом: продолжение синей шапки --------------------
   #topnav — отдельный от #topline блок: в нём логотип слева и вкладки
   разделов справа. Красим только фон полосы; сами вкладки (#taskbar)
   не трогаем, они остаются светлыми кнопками поверх синего. */
#topnav,
.minimal #topnav {
	background: #0f6cbd !important;
	border-bottom: 0 !important;
}

/* логотип нарисован тёмным по светлому — на синем он бы пропал.
   Инверсия делает его белым, не подменяя файл картинки.
   Побочный эффект честный: красный плюсик тоже станет белым. */
#topnav img {
	filter: brightness(0) invert(1);
}

/* --- белые поля по краям окна ----------------------------------------
   #mainscreen отступает от краёв (left/right 10px, bottom 20px), и в этих
   зазорах просвечивал фон <body> — он в Larry не задан вовсе, то есть
   белый по умолчанию. Красим сам body, но только в разделе Почты. */
body:has(#mailview-left) {
	background: #f3f2f1 !important;
}

/* полоса справа от кнопок (фильтр «Все» и поиск) жила на белом фоне —
   отдельный блок #messagesearchtools рядом с тулбаром */
#messagesearchtools {
	background: transparent !important;
}

/* --- логотип: белый текст, красный крест на месте --------------------
   Инверсия делала белым весь логотип, включая фирменный крест. Вместо
   фильтра подставляем заранее перекрашенную копию: серые пиксели текста
   стали белыми, красные оставлены как были (перекраска шла по признаку
   «красный канал заметно выше зелёного и синего», а не по координатам —
   поэтому переживёт замену логотипа на другой того же вида). */
#topnav img {
	content: url(../images/logo_header_white.png) !important;
	filter: none !important;
}

/* --- скругление панелей ----------------------------------------------
   Скин принудительно квадратит вообще всё правилом `* { border-radius:0
   !important }`, поэтому радиус приходится задавать адресно и с той же
   силой, а обрезку содержимого — явным overflow. */
#mailview-top.uibox,
#mailview-bottom.uibox,
#mailview-top.uibox.fullheight {
	border-radius: 8px !important;
	overflow: hidden !important;
}

#messagelistcontainer,
#mailpreviewframe,
#mailview-top .boxlistcontent {
	border-radius: 0 0 8px 8px !important;
}

#mailview-right .boxtitle,
#messagelistheader {
	border-radius: 8px 8px 0 0 !important;
}

/* --- зазор между тулбаром и панелями ---------------------------------
   По горизонтали зазоры у Larry есть (#mailview-left width:200px против
   #mailview-right left:212px, и в widescreen 400 против 412 — по 12px),
   а по вертикали панели прижаты к тулбару: top:0. Из-за этого карточки
   выглядели приклеенными к серой полосе кнопок и «парение» читалось
   только сбоку. */
#mailview-left,
#mailview-right {
	top: 10px !important;
}

/* =====================================================================
   ВКЛАДКА «ЗАДАЧИ» — та же схема, что в Почте: серая подложка,
   белые панели-карточки со скруглением и мягкой тенью.
   Ограничение по разделу — через :has(#tasksview): этот узел есть
   только на экране задач.
   ===================================================================== */
body:has(#tasksview),
#mainscreen:has(#tasksview) {
	background: #f3f2f1 !important;
}

#tasklistsbox.uibox,
#tasksview,
#taskshow {
	background: #fff !important;
	border: 1px solid #e6e4e2 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05) !important;
}

/* заголовок «Списки задач» — как шапка почтовых коробок */
#tasklistsbox .boxtitle {
	background: #fff !important;
	color: #201f1e !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-bottom: 1px solid #edebe9 !important;
	border-radius: 8px 8px 0 0 !important;
}

/* строки списков задач — скруглённая подсветка, как папки в Почте */
#tasklistsbox .treelist li div.tasklist:hover {
	background-color: #f3f2f1 !important;
}

#tasklistsbox .treelist li.selected > div.tasklist {
	background-color: #cfe4fa !important;
	border-radius: 6px !important;
}

/* --- иконка кнопки «СПАМ» ---------------------------------------------
   Кнопку рисует плагин markasjunk с классами `button junk` / `button
   notjunk`. Скин задаёт для них позицию в спрайте (-770px), но картинка
   до кнопки не доходит, и на месте иконки пусто. Ставим и картинку, и
   позицию явно — так же, как сделано для кнопок раздела «Задачи».
   Иконка в спрайте на этом месте есть: непрозрачная область X 19..33. */
#messagetoolbar a.button.junk,
#messagetoolbar a.button.notjunk {
	background-image: url(../images/buttons.png) !important;
	background-repeat: no-repeat !important;
	background-position: center -770px !important;
}

/* --- текст верхней полосы: синий на синем ----------------------------
   Скин красит ссылки topline в цвет темы правилом вида
   `body.xcolor-6da1d3 #topline .topleft a { color:#166ac0 !important }`.
   Оно специфичнее моего прежнего `#topline a` (два класса против одного),
   поэтому после заливки полосы синим весь её текст — «О программе»,
   адрес ящика, кнопки плагинов — стал невидимым: синее по синему.
   Здесь селекторы намеренно повторяют форму скиновых и добавляют ещё
   один класс, чтобы выигрывать по специфичности, а не по случайности. */
body[class*="xcolor-"] #topline,
body[class*="xcolor-"] #topline .topleft a,
body[class*="xcolor-"] #topline .topright a,
body[class*="xcolor-"] #topline .topright span,
body[class*="xcolor-"] #topline .topright a.button-logout,
body[class*="xcolor-"] #topline .username,
body[class*="xcolor-"] #topline a.custombg-link {
	color: #fff !important;
}

/* --- раскрывашки подпапок ---------------------------------------------
   Чёрточки под «СПАМ» и «Корзиной» — это div.treetoggle, значок «−»
   у папок с вложенными (Larry: спрайт listicons, -3px -168px для
   развёрнутого состояния, -144px для свёрнутого).

   Скрывались 19.08 как подозреваемые в «чёрточках» — и зря: чёрточка
   оказалась верхушкой соседней иконки из спрайта, вылезавшей из-за
   увеличенной высоты строки. Управление возвращено; правится только
   вертикальная привязка, потому что мои отступы изменили высоту строки. */
#mailboxlist li div.treetoggle,
#mailboxlist li ul li div.treetoggle {
	top: 6px !important;
}

/* ======================================================================
   ОКНО ЗАДАЧИ (Новая задача / правка) — 19.08.2026, по слову Владимира.

   Вид собран из той же палитры, что и почта: текст #201f1e, подложка
   #f3f2f1, рамки #edebe9, акцент #0f6cbd. Стекло — тот же приём, что на
   странице входа и на кан-бане.

   🔑 Селекторы взяты из НАСТОЯЩЕЙ разметки (plugins/tasklist/skins/
   litecube-f/templates/taskedit.html): #taskedit, form#taskeditform,
   .form-section, панели #taskedit-panel-*. Ничего не выдумано.

   🔴 Окно ловится через `:has(#taskedit)` — так правка не задевает
   остальные диалоги почты. Оба браузера сотрудников (Chrome 142,
   Firefox 153, видно в журнале доступа) `:has` понимают.
   ====================================================================== */

.ui-dialog:has(#taskedit) {
	border: 1px solid rgba(255, 255, 255, .6) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 18px 48px rgba(0, 0, 0, .28) !important;
	background: rgba(255, 255, 255, .92) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	padding: 0 !important;
	overflow: hidden !important;
}

/* шапка окна — как шапка письма: белая, с тонкой линией снизу */
.ui-dialog:has(#taskedit) .ui-dialog-titlebar {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #edebe9 !important;
	border-radius: 0 !important;
	padding: 14px 18px !important;
	color: #201f1e !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

.ui-dialog:has(#taskedit) .ui-dialog-content {
	background: transparent !important;
	padding: 0 18px 6px 18px !important;
}

/* --- вкладки: пилюли вместо «папок» --------------------------------- */

/* 🔑 Ряд вкладок задаётся ЗДЕСЬ целиком, а не наследуется от jQuery UI:
   раскладку сюда приносит чужая таблица стилей, и стоит ей загрузиться
   в другом порядке — вкладки встают столбиком с маркерами списка.
   Проверено на копии: без своих правил именно так и вышло. */
#taskedit > form > ul,
#taskedit ul.ui-tabs-nav {
	display: flex !important;
	gap: 2px !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #edebe9 !important;
	border-radius: 0 !important;
	padding: 10px 0 0 0 !important;
	margin: 0 0 14px 0 !important;
}

#taskedit > form > ul > li,
#taskedit ul.ui-tabs-nav li {
	display: block !important;
	float: none !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	margin: 0 4px -1px 0 !important;
	border-radius: 0 !important;
	top: 0 !important;
}

#taskedit ul.ui-tabs-nav li a {
	color: #605e5c !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
}

#taskedit ul.ui-tabs-nav li.ui-tabs-active a,
#taskedit ul.ui-tabs-nav li.ui-state-active a {
	color: #0f6cbd !important;
	border-bottom-color: #0f6cbd !important;
	background: transparent !important;
}

#taskedit ul.ui-tabs-nav li a:hover {
	color: #201f1e !important;
	background: #f3f2f1 !important;
	border-radius: 6px 6px 0 0 !important;
}

/* --- серые области вкладок: скругление как на вкладке «Почта» ---------
   Скин квадратит вообще всё правилом `* { border-radius:0 !important }`,
   поэтому радиус задаётся адресно и с той же силой.

   🔑 8px — ТО ЖЕ значение, что у #mailview-top/#mailview-bottom выше в этом
   файле, а не «похожее»: Владимир попросил «как на вкладке Почта», и разные
   числа в двух местах разъехались бы при первой же правке одного из них.

   overflow здесь СОЗНАТЕЛЬНО не трогаем: содержимое панели прозрачное
   (.form-section выше), закрашивать углы нечему, а `overflow:hidden` срезал
   бы уголок изменения размера у поля описания и выпадающие списки. */
#taskedit .ui-tabs-panel,
#taskedit [id^="taskedit-panel-"] {
	border-radius: 8px !important;
}

/* --- поля формы ------------------------------------------------------ */

#taskedit .form-section {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 14px 0 !important;
}

/* Подписи строк с датами стоят В СТРОКУ с полями (так в шаблоне), поэтому
   им нужна общая ширина — иначе поля разъезжаются лесенкой. */
#taskedit .form-section > label {
	min-width: 118px !important;
	vertical-align: middle !important;
}

#taskedit .form-section > label,
#taskedit label {
	display: inline-block !important;
	color: #605e5c !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	margin: 0 0 4px 0 !important;
	text-transform: none !important;
}

#taskedit input.text,
#taskedit input[type="text"],
#taskedit textarea,
#taskedit select {
	background: #fff !important;
	color: #201f1e !important;
	border: 1px solid #d6d3d1 !important;
	border-radius: 6px !important;
	padding: 7px 10px !important;
	font-size: 13px !important;
	box-shadow: none !important;
	outline: none !important;
}

#taskedit input#taskedit-title,
#taskedit textarea#taskedit-description {
	width: 100% !important;
	box-sizing: border-box !important;
}

#taskedit textarea#taskedit-description {
	min-height: 96px !important;
	line-height: 1.45 !important;
}

/* 🔑 Подсветка поля под курсором ввода — двумя признаками сразу: цвет
   рамки И кольцо. Одного цвета мало тем, кто не различает оттенки. */
#taskedit input.text:focus,
#taskedit input[type="text"]:focus,
#taskedit textarea:focus,
#taskedit select:focus {
	border-color: #0f6cbd !important;
	box-shadow: 0 0 0 3px rgba(15, 108, 189, .18) !important;
}

/* ползунок готовности */
#taskedit #taskedit-completeness-slider {
	margin: 8px 0 0 0 !important;
	border-radius: 999px !important;
	background: #edebe9 !important;
	border: 0 !important;
	height: 6px !important;
}

#taskedit #taskedit-completeness-slider .ui-slider-range {
	background: #0f6cbd !important;
	border-radius: 999px !important;
}

#taskedit #taskedit-completeness-slider .ui-slider-handle {
	background: #fff !important;
	border: 2px solid #0f6cbd !important;
	border-radius: 50% !important;
	width: 14px !important;
	height: 14px !important;
	top: -4px !important;
}

/* --- вложения: видно, что сюда можно бросить файл -------------------- */

#taskedit-panel-attachments #taskedit-attachments-form {
	margin: 10px 0 4px 0 !important;
	padding: 18px !important;
	border: 1px dashed #c8c6c4 !important;
	border-radius: 10px !important;
	background: #faf9f8 !important;
	text-align: center !important;
}

#taskedit-panel-attachments .attachmentslist li,
#taskedit-attachments ul li {
	background: #fff !important;
	border: 1px solid #edebe9 !important;
	border-radius: 8px !important;
	margin: 0 0 6px 0 !important;
	padding: 8px 10px !important;
	list-style: none !important;
}

/* --- кнопки окна ----------------------------------------------------- */

.ui-dialog:has(#taskedit) .ui-dialog-buttonpane {
	background: #faf9f8 !important;
	border-top: 1px solid #edebe9 !important;
	margin: 0 !important;
	padding: 12px 18px !important;
}

.ui-dialog:has(#taskedit) .ui-dialog-buttonpane button {
	border-radius: 6px !important;
	border: 1px solid #d6d3d1 !important;
	background: #fff !important;
	color: #201f1e !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 7px 16px !important;
}

/* первая кнопка окна — «Сохранить»: главное действие, поэтому заливка */
.ui-dialog:has(#taskedit) .ui-dialog-buttonpane button.mainaction,
.ui-dialog:has(#taskedit) .ui-dialog-buttonset button:first-child {
	background: #0f6cbd !important;
	border-color: #0f6cbd !important;
	color: #fff !important;
}

.ui-dialog:has(#taskedit) .ui-dialog-buttonset button:first-child:hover {
	background: #115ea3 !important;
	border-color: #115ea3 !important;
}

/* мелкие поля: процент готовности и время — ширина по смыслу, а не по умолчанию */
#taskedit #taskedit-completeness {
	width: 64px !important;
	text-align: right !important;
}

#taskedit input#taskedit-starttime,
#taskedit input#taskedit-time {
	width: 84px !important;
}

#taskedit input#taskedit-startdate,
#taskedit input#taskedit-date {
	width: 132px !important;
}

/* ссылка «без даты» — не кнопка, но и не подчёркнутый текст посреди формы */
#taskedit a.edit-nodate {
	color: #0f6cbd !important;
	font-size: 12px !important;
	text-decoration: none !important;
}

#taskedit a.edit-nodate:hover {
	text-decoration: underline !important;
}