/* Timp website 2026-10 «site2» skin (mockups: ops/timp/mockups/site2): calm light page, white top bar, cards with a thin
   border, natural buttons (solid colour, no gradients or glow). Loaded after refresh.css; only overrides its tokens and a
   few components, markup and scripts are unchanged. Themes (data-accent) keep their accent colour; dark mode keeps working. */

:root, html[data-appearance="light"] {
  --page: color-mix(in srgb, var(--accent) 4%, #f5f7f6);
  --bar: #ffffff; --bar-ink: #0d1b16; --bar-ink2: #64756f;
  --card: #ffffff; --card-2: #f8faf9; --fill: #eef2f0; --line: #e3e9e6;
  --text: #0d1b16; --text-2: #5f716a; --text-3: #94a49e; --heading-on-page: #0d1b16;
  --radius-s: 10px; --radius: 14px; --radius-l: 16px;
  --shadow-1: 0 1px 2px rgba(13,27,22,.05);
  --shadow-2: 0 1px 2px rgba(13,27,22,.05), 0 6px 20px rgba(13,27,22,.06);
}
html[data-appearance="dark"] {
  --page: color-mix(in srgb, var(--accent) 5%, #0e1513);
  --bar: #121b18; --bar-ink: #e9f2ee; --bar-ink2: #93a69f;
  --card: #151f1c; --card-2: #19241f; --fill: #1f2b27; --line: #26332e;
  --heading-on-page: #e9f2ee;
  --shadow-1: none; --shadow-2: 0 8px 24px rgba(0,0,0,.35);
}
/* Every theme used to paint its own gradient page — now one calm page tinted by the theme. */
html[data-accent] { --page: color-mix(in srgb, var(--accent) 4%, #f5f7f6); }
html[data-appearance="dark"][data-accent] { --page: color-mix(in srgb, var(--accent) 5%, #0e1513); }
html[data-accent], html[data-appearance] { --bar: #ffffff; }
html[data-appearance="dark"][data-accent], html[data-appearance="dark"] { --bar: #121b18; }

#main, .center_right { background: var(--page) !important; }
body { background: var(--page); }

/* ---------- top bar ---------- */
.topMenu { background: var(--bar) !important; box-shadow: 0 1px 0 var(--line) !important; }
.topMenu > i:hover, .topMenu .notifications > i:hover, .topMenu__menuList i:hover, .topMenu .tc-menu > i:hover,
#dm_btn:hover { background: var(--fill) !important; color: var(--bar-ink) !important; }
.topMenu #leftMenu { background: var(--fill) !important; }
.topMenu #leftMenu, .topMenu #leftMenu * { color: var(--bar-ink2) !important; }
.lang img { box-shadow: 0 0 0 1px var(--line); }

/* ---------- natural buttons ---------- */
.btn { box-shadow: none !important; border-radius: 10px !important; font-weight: 600 !important; letter-spacing: 0; }
.btn:hover { background: var(--accent-strong) !important; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--light, .btn.btn--light { background: var(--card) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
.btn--light *, .btn.btn--light * { color: var(--text) !important; }
.btn--light:hover, .btn.btn--light:hover { background: var(--fill) !important; }
#addTask { border-radius: 10px !important; padding: 0 14px !important; height: 34px; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel { box-shadow: none !important; border-radius: 10px !important; }
#timp-pwa-card button, .tp-push-card__btns button { border-radius: 10px !important; }
.tp-push-card .tp-later { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- left panel ---------- */
.leftMenu, #left { background: var(--card) !important; box-shadow: 1px 0 0 var(--line) !important; }
.projectCard--choice { background: var(--accent-soft) !important; box-shadow: none !important; }
.projectCard--choice .projectCard__title, .projectCard--choice p { color: var(--accent) !important; }
.tabsBlock__tabs--active { box-shadow: 0 1px 2px rgba(13,27,22,.08) !important; }

/* ---------- home dashboard ---------- */
.home__title { color: var(--heading-on-page) !important; text-shadow: none !important; font-size: 18px !important; }
.home__notifications, .team, .mainCard { box-shadow: var(--shadow-1) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-l) !important; }
.mainCard:hover { transform: none; box-shadow: var(--shadow-2) !important; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important; }
.home__cardDeck:empty { border: 1.5px dashed var(--line); background: transparent; }

/* ---------- tasks ---------- */
#tabs.tabContainer, .tabContainer { background: var(--card) !important; }
html[data-appearance="dark"] #tabs.tabContainer, html[data-appearance="dark"] .tabContainer { background: var(--card) !important; }
.miniCard { box-shadow: none !important; border: 1px solid var(--line) !important; border-radius: 12px !important; }
.miniCard:hover { transform: none; box-shadow: var(--shadow-2) !important; }
#filter_btn { box-shadow: inset 0 0 0 1px var(--line) !important; }

/* ---------- popups ---------- */
.popUpWindow__card, .settingsCard, .notifications__popup, #notify_windows, .dropList, .listUsers, #right_click_window, .contextMenu, .tc-panel,
#timp-pwa-card, .tp-push-card { box-shadow: 0 12px 40px rgba(13,27,22,.14), 0 0 0 1px var(--line) !important; }
.landTabs__tabs.active { background: var(--accent-soft) !important; color: var(--accent) !important; }
.landTabs__tabs.active *, .landTabs__tabs.active i { color: var(--accent) !important; }
html[data-appearance="dark"] .landTabs__tabs.active * { color: var(--accent) !important; }
.chatContainer__msg { box-shadow: 0 1px 1px rgba(13,27,22,.06) !important; }
.projectArchive, #project_archive_container, .leftMenu__archive, #left > div:last-child { background: transparent !important; }
#toogle_project_archive_btn { background: var(--fill) !important; border-radius: 10px !important; }

/* #222: панель функций задачи — горизонтальная строка в шапке карточки вместо вертикальной колонки справа.
   Фон совпадает с .card (#f7f7f7 из style.min.css): карточка не перекрашивается темой, а sticky-строке нужен непрозрачный фон.
   Отрицательные поля закрывают отступы .card__detailContainer, где стоят значки заголовков полей. */
.card__control--header { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 8px -0.75em 0 -1.75em; padding: 6px 0.75em 6px 1.75em; overflow: visible; text-align: left; background: #f7f7f7; border-bottom: 1px solid rgba(0,0,0,.1); }
.card__control--header .card__controlBox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.card__control--header .card__controlBox:empty { display: none; }
.card__control--header .card__controlBox:not(:empty) ~ .card__controlBox:not(:empty) { padding-left: 12px; border-left: 1px solid rgba(0,0,0,.1); }
.card__control--header .card__controlTitle { display: none !important; }
.card__control--header .card__btn { margin: 0; }
.card__control--header .card__btn.title { width: auto; }