/* ============================================================================
   VIKUNJA FOCUS THEME v3 — global CSS overlay
   Version: 3.0 (2026-07-20)
   Compatibility health markers: VIKUNJA FOCUS THEME v2 / VIKUNJA FOCUS THEME v1

   The stylesheet is loaded after Vikunja's own bundles and deliberately fixes
   one dark palette for every route and every built-in theme preference.
   It changes presentation only: no task data, API behavior, auth, or DOM order.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. ТОКЕНЫ ОВЕРЛЕЯ (из макета)
   -------------------------------------------------------------------------- */
:root {
  --vk-bg: #1b1c20; /* фон приложения */
  --vk-panel: #232429; /* сайдбар, карточки, модалки */
  --vk-panel-2: #26272d; /* канбан-карточки, ховеры */
  --vk-border: #33343b; /* границы */
  --vk-text: #dfe1e6; /* основной текст */
  --vk-text-2: #a7a9b2; /* вторичный */
  --vk-text-3: #9295a0; /* приглушённый, но читаемый */
  --vk-accent: #8ea6c8; /* спокойный нейтральный акцент */
  --vk-link: #9db1cc;
  --vk-danger: #d9736f; /* срочно / просрочено */
  --vk-warning: #d9a25e; /* высокий приоритет / скоро срок */
  --vk-success: #6cb87a;
  --vk-chip-bg: #2a2b31; /* нейтральный чип метки */
  --vk-chip-fg: #b4b6c0; /* текст в чипе */
  --vk-radius: 6px;
  --vk-font:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

/* ----------------------------------------------------------------------------
   1. GLOBAL PALETTE
   Applied to :root and both built-in theme classes. This is what makes the
   result identical on overview, lists, table, kanban, task details, settings,
   login, desktop browser and PWA.
   -------------------------------------------------------------------------- */
:root,
:root.light,
:root.dark,
html.light,
html.dark,
body.light,
body.dark {
  color-scheme: dark;
  --site-background: #1b1c20 !important;
  --white: #232429 !important;
  --grey-50: #202127 !important;
  --grey-100: #26272d !important;
  --grey-150: #2c2d34 !important;
  --grey-200: #33343b !important;
  --grey-300: #3f414a !important;
  --grey-400: #9699a3 !important;
  --grey-500: #a7a9b2 !important;
  --grey-600: #b0b2bc !important;
  --grey-700: #c6c8d1 !important;
  --grey-800: #dfe1e6 !important;
  --grey-900: #eceef2 !important;
  --text: #dfe1e6 !important;
  --text-light: #a7a9b2 !important;
  --link: #9db1cc !important;
  --primary: #8ea6c8 !important;
  --primary-hsl: 216, 34%, 67% !important;
  --danger: #d9736f !important;
  --warning: #d9a25e !important;
  --success: #6cb87a !important;
  --info: #5eaed9 !important;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

html,
body,
#app {
  background: var(--vk-bg) !important;
  color: var(--vk-text) !important;
}

/* ----------------------------------------------------------------------------
   2. ТИПОГРАФИКА — системный стек вместо Quicksand/Open Sans  [OK]
   -------------------------------------------------------------------------- */
body,
button,
input,
textarea,
select {
  font-family: var(--vk-font) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.title {
  font-family: var(--vk-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Кнопки: без КАПСА и крика  [ПРОВЕРИТЬ - обычно .button] */
.button {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--vk-accent) !important;
  outline-offset: 2px !important;
}

/* ----------------------------------------------------------------------------
   3. СТРОКА ЗАДАЧИ В СПИСКЕ  [OK: SingleTaskInProject.vue]
   Компактность Todoist: меньше паддинги, тише мета-информация.
   Многострочные названия уже поддерживаются (line-clamp: 4) — не трогаем.
   -------------------------------------------------------------------------- */
.task.single-task {
  padding: 0.35rem 0.5rem !important;
  border-radius: var(--vk-radius) !important;
  border-width: 1px !important;
}
.task.single-task:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
.task.single-task .tasktext {
  font-size: 0.92rem;
  line-height: 1.45;
}
/* Название проекта справа/слева — тише и мельче  [OK] */
.task.single-task .task-project {
  font-size: 0.78rem !important;
  color: var(--grey-400) !important;
  opacity: 0.9;
}
/* Срок: без курсива, компактно; просрочка остаётся красной  [OK] */
.task.single-task .dueDate time {
  font-style: normal !important;
  font-size: 0.8rem;
  color: var(--vk-warning);
}
.task.single-task .dueDate time.overdue {
  color: var(--danger) !important;
}
/* Выполненные — мягкое зачёркивание  [OK] */
.tasktext.done {
  color: var(--grey-500) !important;
  text-decoration-color: var(--grey-300) !important;
}

/* ----------------------------------------------------------------------------
   4. МЕТКИ → нейтральный чип с цветной точкой  [OK: Labels.vue → .label-wrapper .tag]
   Трюк: родной цвет метки задан inline-стилем. Мы НЕ перекрашиваем фон,
   а накрываем его нейтральной плашкой (::before) с круглой «дыркой» слева —
   через неё исходный цвет виден как точка. Работает для любых цветов меток.
   -------------------------------------------------------------------------- */
.label-wrapper .tag {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--vk-chip-fg) !important; /* перебивает inline-цвет текста */
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  height: auto !important;
  padding: 0.28em 0.7em 0.28em 1.55em !important; /* слева место под точку */
  border-radius: 9px !important;
  text-shadow: none !important;
}
.label-wrapper .tag::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--vk-chip-bg);
  z-index: -1;
  /* дырка-точка: центр на 0.95em от левого края */
  -webkit-mask: radial-gradient(
    circle at 0.95em 50%,
    transparent 3px,
    #000 3.7px
  );
  mask: radial-gradient(circle at 0.95em 50%, transparent 3px, #000 3.7px);
  pointer-events: none;
}
/* Кнопка удаления метки внутри чипа (режим редактирования) — поверх плашки */
.label-wrapper .tag .delete,
.label-wrapper .tag button {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------------------
   5. ПРИОРИТЕТ — вместо красного текста «! Высокий»  [OK: .priority-label]
   Текст прячем (font-size:0), остаётся компактный значок «!» как флажок Todoist.
   -------------------------------------------------------------------------- */
.priority-label {
  font-size: 0 !important;
  gap: 0 !important;
  padding: 0 0.25rem !important;
  background: transparent !important;
  vertical-align: middle;
}
.priority-label .icon {
  font-size: 0.85rem !important;
  block-size: auto !important;
  color: var(--vk-warning);
}
/* Приоритет показывает штатный компактный «!». Не подсвечиваем весь wrapper
   чекбокса: его hit-area шире самого квадрата и превращается в овал. */
.task.single-task:has(.priority-label) .fancy-checkbox {
  box-shadow: none !important;
}
/* В канбане приоритет — так же тихо  [OK: KanbanCard.vue] */
.kanban .task .priority-label {
  background: transparent !important;
}

/* ----------------------------------------------------------------------------
   6. САЙДБАР — аккуратнее, компактнее  [OK: Navigation.vue]
   Основную работу делает палитра (п.1). Здесь — плотность и тишина.
   -------------------------------------------------------------------------- */
.menu-list a,
.menu-list .list-menu-link {
  padding: 0.32rem 0.6rem !important;
  font-size: 0.84rem !important;
  border-radius: var(--vk-radius) !important;
  color: var(--grey-600) !important;
}
.menu-list a:hover,
.menu-list .list-menu-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--vk-text) !important;
}
.menu-list a.router-link-exact-active,
.menu-list .list-menu-link.router-link-exact-active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--vk-text) !important;
}
/* Заголовки секций («Избранное», «Входящие») */
.menu-label {
  font-size: 0.68rem !important;
  letter-spacing: 0.07em !important;
  color: var(--grey-400) !important;
}
/* Звёзды избранного и иконки-воронки — приглушить */
.menu-list .icon,
.menu-list svg {
  opacity: 0.55;
}

/* В Navigation.vue верхние пункты — соседние li внутри одного
   `.top-menu .other-menu-items`, а избранное, фильтры и проекты — отдельные
   соседние nav.menu. Поэтому обнуляем оба источника вертикальных разрывов:
   padding/gap на строках верхнего меню и padding между nav-секциями.
   Кликавельная высота остаётся на самой ссылке; мобильное меню не уплотняем. */
@media (min-width: 769px) {
  .menu-container {
    padding-block: 0.5rem !important;
  }
  .menu-container > .menu + .menu {
    padding-block-start: 0.125rem !important;
  }
  .menu-container .menu-list {
    margin-block: 0 !important;
    row-gap: 0 !important;
  }
  .menu-container .menu-list li {
    margin-block: 0 !important;
    padding-block: 0 !important;
  }
  .menu-container .top-menu,
  .menu-container .top-menu .other-menu-items {
    margin-block: 0 !important;
    padding-block: 0 !important;
    row-gap: 0 !important;
  }
  .menu-container .top-menu .other-menu-items > li,
  .menu-container .top-menu .other-menu-items > li + li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .menu-container .menu-list a,
  .menu-container .menu-list .list-menu-link {
    box-sizing: border-box;
    inline-size: 100%;
    margin-block: 0 !important;
  }
  .menu-container .top-menu .other-menu-items > li > a,
  .menu-container .top-menu .other-menu-items > li > .list-menu-link {
    display: flex !important;
    align-items: center !important;
    min-block-size: 2rem;
    padding-block: 0.32rem !important;
  }
  .menu-container .menu-label {
    margin-block: 0.6rem 0.22rem !important;
  }
}

/* ----------------------------------------------------------------------------
   7. ВЕРХНЯЯ ПАНЕЛЬ  [ПРОВЕРИТЬ: обычно header.navbar]
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--site-background) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--vk-border);
}

/* ----------------------------------------------------------------------------
   8. ПЕРЕКЛЮЧАТЕЛЬ ВИДОВ (Список / Гант / Таблица / Канбан)  [OK: ProjectWrapper.vue]
   -------------------------------------------------------------------------- */
.switch-view {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.switch-view-button,
.switch-view a {
  font-size: 0.84rem !important;
  padding: 0.25rem 0.7rem !important;
  border-radius: var(--vk-radius) !important;
  color: var(--grey-500) !important;
  background: transparent !important;
}
.switch-view-button.is-active,
.switch-view a.router-link-exact-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--vk-text) !important;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   9. ТАБЛИЦА  [OK: ProjectTable.vue → table.table]
   -------------------------------------------------------------------------- */
.table-view table,
table.table {
  background: transparent !important;
  font-size: 0.9rem !important;
}
.table-view table th,
table.table th {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--vk-text-2) !important;
  border-color: var(--vk-border) !important;
}
.table-view table td,
table.table td {
  padding: 0.45rem 0.6rem !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  vertical-align: middle !important;
  color: var(--vk-text-2) !important;
}
/* Названия задач — цвет текста вместо синих ссылок */
.table-view table a,
table.table tbody a {
  color: var(--vk-text-2) !important;
}
.table-view table a:hover,
table.table tbody a:hover {
  color: var(--vk-link) !important;
}
.table-view table.is-hoverable tbody tr:hover,
table.table.is-hoverable tbody tr:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* Список использует консервативный max-width из штатного вида. На широком
   экране это сжимает названия, метки и сроки в центральную колонку, оставляя
   справа сотни пустых пикселей. Расширяем только list view и только на desktop. */
@media (min-width: 1024px) {
  .project-view .tasks,
  .project-view .list-view,
  .loader-container > .tasks,
  .loader-container > .list-view {
    inline-size: 100% !important;
    max-inline-size: 1280px !important;
  }
}

/* ----------------------------------------------------------------------------
   10. КАНБАН  [OK: KanbanCard.vue; контейнеры bucket — ПРОВЕРИТЬ]
   -------------------------------------------------------------------------- */
.kanban .bucket {
  background: transparent !important;
}
.kanban .bucket .title {
  font-size: 0.85rem !important;
}
.kanban .task {
  background: var(--vk-panel-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: none !important;
  border-radius: 8px !important;
}
.kanban .task:hover {
  border-color: rgba(255, 255, 255, 0.13);
}
.kanban .task h3 {
  font-size: 0.85rem !important;
  line-height: 1.35 !important;
  color: var(--vk-text);
}
.kanban .task .task-id {
  color: var(--grey-400) !important;
  font-size: 0.72rem !important;
}
/* Плашки-иконки в футере карточки — тише  [OK] */
.kanban .task .footer .icon,
.kanban .task .due-date {
  background: rgba(255, 255, 255, 0.05) !important;
}

@media (min-width: 1024px) {
  .kanban .bucket {
    min-inline-size: 19.5rem;
  }
}

/* ----------------------------------------------------------------------------
   11. КАРТОЧКА ЗАДАЧИ  [OK: TaskDetailView.vue]
   -------------------------------------------------------------------------- */
.task-view .detail-title {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-400) !important;
}
.task-view .subtitle,
.task-view .subtitle a {
  font-size: 0.8rem !important;
  color: var(--grey-400) !important;
}
/* Колонка действий справа — компактные тихие кнопки */
.task-view .action-buttons .button {
  font-size: 0.82rem !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--grey-600) !important;
}
.task-view .action-buttons .button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--vk-text) !important;
}
.task-view .action-buttons .action-heading {
  font-size: 0.68rem !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--grey-400) !important;
}

/* ----------------------------------------------------------------------------
   12. ПОЛЕ «ДОБАВИТЬ ЗАДАЧУ»  [ПРОВЕРИТЬ: компонент AddTask]
   Палитра уже перекрашивает инпуты; здесь — спокойная рамка и кнопка.
   -------------------------------------------------------------------------- */
.add-task .input,
.add-task textarea,
.task-add .input,
.task-add textarea {
  background: var(--grey-50) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
.add-task .input:focus,
.task-add .input:focus,
.add-task textarea:focus,
.task-add textarea:focus {
  border-color: var(--primary) !important;
}

/* ----------------------------------------------------------------------------
   13. SHARED SURFACES — routes not covered by a task-specific selector
   Covers overview, filters, projects, settings, login, dialogs and menus.
   -------------------------------------------------------------------------- */
.card,
.box,
.modal-card,
.modal-card-head,
.modal-card-body,
.modal-card-foot,
.dropdown-content,
.dropdown-menu,
.multiselect .multiselect__content-wrapper,
.multiselect .multiselect__tags,
.notifications .notification,
.task-view-container,
.project-view,
.settings,
.user-settings {
  background-color: var(--vk-panel) !important;
  border-color: var(--vk-border) !important;
  color: var(--vk-text) !important;
  box-shadow: none !important;
}

.input,
.textarea,
.select select,
input,
textarea,
select {
  background-color: var(--grey-50) !important;
  border-color: var(--vk-border) !important;
  color: var(--vk-text) !important;
  box-shadow: none !important;
}

.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--vk-text-3) !important;
  opacity: 1 !important;
}

.tabs a,
.pagination-link,
.pagination-next,
.pagination-previous,
.breadcrumb a,
.dropdown-item {
  color: var(--vk-text-2) !important;
  border-color: var(--vk-border) !important;
}

.tabs li.is-active a,
.pagination-link.is-current,
.dropdown-item:hover,
.dropdown-item.is-active {
  color: var(--vk-text) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--vk-accent) !important;
}

.help,
.is-size-7,
.has-text-grey,
.has-text-grey-light,
.has-text-light {
  color: var(--vk-text-3) !important;
}

.modal-background {
  background-color: rgba(8, 9, 12, 0.78) !important;
  backdrop-filter: blur(3px);
}

.content code,
code {
  background: var(--grey-50) !important;
  color: var(--vk-text-2) !important;
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   14. ОБЩЕЕ: ссылки и скроллбары
   -------------------------------------------------------------------------- */
a {
  color: var(--vk-link);
}
a:hover {
  color: var(--grey-900);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #2e2f36;
  border-radius: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #2e2f36 transparent;
}

/* ----------------------------------------------------------------------------
   15. МОБИЛЬНЫЙ / PWA — крупнее цели касания, те же принципы
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .task.single-task {
    padding: 0.6rem 0.5rem !important; /* строка ≥ 44px */
  }
  .task.single-task .tasktext {
    font-size: 0.98rem;
  }
  .label-wrapper .tag {
    font-size: 0.68rem !important;
  }
}