/* Nocturne — тёмная тема, портированная из макета «ITSM Task Tracker»
   (Claude Design handoff). Подключается только на страницах, которые
   расширяют base_dark.html — на остальные (base.html) не влияет. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-surface-2: color-mix(in srgb, #e9e9ed 3%, transparent);
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-red: #e27185;
  --color-red-fg: #f3aab7;
  --color-red-bg: rgba(226,113,133,.16);
  --color-amber: #e2c071;
  --color-amber-fg: #f0d79b;
  --color-amber-bg: rgba(226,192,113,.14);
  --color-green: #7fd1a6;
  --color-green-fg: #bdeed4;
  --color-green-bg: rgba(127,209,166,.14);

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 3px; --space-2: 6px; --space-3: 9px; --space-4: 12px; --space-6: 18px; --space-8: 24px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.6);

  /* Алиасы старых имён переменных (из style.css) — страницы, ещё не
     переписанные под nt-классы, используют инлайн-стили вида
     "var(--border)"/"var(--primary)" и т.д. напрямую; эти алиасы позволяют
     им автоматически подхватить тёмную тему без правки каждого шаблона. */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --border: var(--color-divider);
  --primary: var(--color-accent);
  --primary-dark: var(--color-accent-600);
  --green: var(--color-green);
  --orange: var(--color-amber);
  --red: var(--color-red);
  --radius: var(--radius-md);
}

.nt { color-scheme: dark; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); min-height: 100vh; }
.nt * { box-sizing: border-box; }
.nt a { color: var(--color-accent); text-decoration: none; }
.nt a:hover { color: var(--color-accent-400); }
.nt ::-webkit-scrollbar { width: 8px; height: 8px; }
.nt ::-webkit-scrollbar-thumb { background: #3f424d; border-radius: var(--radius-md); }
.nt h1, .nt h2, .nt h3 { font-family: var(--font-heading); font-weight: 500; margin: 0; letter-spacing: -.015em; }
.nt .muted { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.nt .kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* — layout shell — */
.nt-shell { display: grid; grid-template-columns: minmax(0,216px) minmax(0,1fr); min-height: 100vh; }
/* display:none всегда (не только в медиа-запросе) — иначе на десктопе этот
   div остаётся третьим авто-размещённым элементом грида и сдвигает aside/
   main по колонкам (регрессия, из-за которой сайдбар и контент съезжали). */
.nt-overlay { display: none; }
@media (max-width: 860px) {
  .nt-shell { grid-template-columns: minmax(0,1fr); }
  .nt-aside { position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 50;
    transform: translateX(-100%); transition: transform .2s ease; }
  .nt-aside.open { transform: translateX(0); }
  .nt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
  .nt-overlay.open { display: block; }
  .nt-hamburger { display: inline-flex !important; }
}
.nt-aside { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-4);
  background: linear-gradient(180deg,#1b1d2c,var(--color-bg)); border-right: 1px solid var(--color-divider); }
.nt-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.nt-brand .mark { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--color-accent);
  display: grid; place-items: center; box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 30%, transparent); color: var(--color-accent); font-size: 12px; }
.nt-brand .name { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.nt-hamburger { display: none; background: transparent; border: 0; color: var(--color-text); font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }

/* — логотип на светлой подложке — тёмно-синий текст логотипа нечитаем
   на тёмном фоне приложения, поэтому логотип всегда сидит на белом чипе,
   и в сайдбаре, и на странице входа. */
.nt-logo-chip {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--radius-md); padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.nt-logo-chip img { display: block; width: 100%; height: auto; }
.nt-logo-chip.nt-logo-lg { padding: 18px 22px; }

.nt-nav { display: flex; flex-direction: column; gap: 2px; }
.nt-nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); color: color-mix(in srgb, var(--color-text) 62%, transparent); font-size: 13px; }
.nt-nav a:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.nt-nav a.active { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-200); }
.nt-nav a i { font-size: 16px; width: 16px; text-align: center; }
.nt-group { margin-top: var(--space-2); }
/* подпись-разделитель блоков меню (у Top_team: «Как сотрудник» / «Top_team») */
.nt-nav-section { margin: var(--space-4) var(--space-3) 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.nt-nav-section:first-child { margin-top: 0; }
.nt-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.nt-group summary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.nt-group summary::-webkit-details-marker { display: none; }
.nt-group summary i { font-size: 16px; width: 16px; text-align: center; }
.nt-group[open] summary { color: var(--color-text); }
.nt-group nav a { padding-left: calc(var(--space-3) + 16px + var(--space-3)); }

.nt-user { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); }
.nt-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-800); color: var(--color-accent-200);
  display: grid; place-items: center; font-size: 10px; flex: none; }
.nt-user .who { line-height: 1.25; min-width: 0; flex: 1; }
.nt-user .who .name { font-size: 12px; }
.nt-user .who .role { font-size: 10px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.nt-user .logout { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.nt-main { min-width: 0; display: flex; flex-direction: column; }
.nt-header { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--color-divider); }
.nt-header h2 { font-size: 20px; margin-top: 2px; }
.nt-content { padding: var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6);
  max-width: 1180px; width: 100%; margin: 0 auto; }

/* — flash messages — */
.nt-flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 13px; }
.nt-flash.success { background: var(--color-green-bg); color: var(--color-green-fg); }
.nt-flash.danger { background: var(--color-red-bg); color: var(--color-red-fg); }
.nt-flash.warning { background: var(--color-amber-bg); color: var(--color-amber-fg); }
.nt-flash.info { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-200); }

/* — buttons / inputs — */
.nt .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  font: 400 13px var(--font-body); color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); white-space: nowrap; }
.nt .btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.nt .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.nt .btn-secondary { border-color: var(--color-divider); }
.nt .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nt .btn-danger { color: var(--color-red); border-color: var(--color-red); }
.nt .btn-danger:hover { background: var(--color-red-bg); }
.nt .btn-sm { font-size: 12px; padding: 5px 10px; }
.nt .input, .nt select.input, .nt textarea.input {
  width: 100%; min-height: 34px; padding: 6px 10px; font: inherit; font-size: 13px;
  color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); }
.nt .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.nt .input:focus-visible { border-color: var(--color-accent); outline: none; }
.nt label.nt-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* — cards — */
.nt .card { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nt .card-title { font-size: 13px; font-weight: 500; margin-bottom: var(--space-3); }

/* — stat cards — */
.nt-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--space-4); }
.nt-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nt-stat .value { display: flex; align-items: baseline; gap: var(--space-2); font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.nt-stat .note { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* — tags / badges — */
.nt .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }
.nt .tag-outline { box-shadow: 0 0 0 1px var(--color-divider); color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — deadline widget — */
.nt-deadline { display: flex; flex-direction: column; gap: var(--space-3); }
.nt-deadline .value { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nt-bar { height: 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
.nt-bar > span { display: block; height: 100%; }
.nt-bar-sm { height: 3px; }

/* — table — */
.nt-table { border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.nt-table .row, .nt-table .head {
  display: grid; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); }
.nt-table .head { border-top: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent); background: color-mix(in srgb, var(--color-text) 3%, transparent);
  padding-top: var(--space-2); padding-bottom: var(--space-2); }
.nt-table .row:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.nt-table a.row { display: grid; color: inherit; }

/* — kanban board — */
.nt-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--space-4); align-items: start; }
.nt-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.nt-col-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); font-size: 12px; }
.nt-col-head .dot { width: 6px; height: 6px; border-radius: 50%; }
.nt-col-head .count { font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); margin-left: auto; }
.nt-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); color: inherit; }
.nt-card:hover { box-shadow: var(--shadow-md); }
.nt-card .title { font-size: 13px; line-height: 1.35; }
.nt-card .meta { display: flex; align-items: center; gap: var(--space-2); font-size: 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.nt-avatar-sm { width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent-800); color: var(--color-accent-200);
  display: grid; place-items: center; font-size: 9px; flex: none; }

/* — activity feed — */
.nt-activity .item { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: var(--space-4); align-items: start;
  padding: var(--space-4) 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent); }
.nt-activity .item:first-child { border-top: 0; }
.nt-activity .item i { font-size: 15px; margin-top: 2px; }
.nt-activity .item .when { font-size: 11px; color: color-mix(in srgb, var(--color-text) 40%, transparent); white-space: nowrap; }

/* — view toggle — */
.nt-seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.nt-seg button { font: 400 12px var(--font-body); padding: var(--space-2) var(--space-4); border: 0; cursor: pointer;
  background: transparent; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.nt-seg button + button { border-left: 1px solid var(--color-divider); }
.nt-seg button.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-300); }

/* ══════════════════════════════════════════════════════════════════════
   Легаси-словарь классов (из style.css) — тёмные версии тех же классов,
   чтобы страницы, ещё не переписанные под nt-*, корректно смотрелись
   после простой смены extends на base_dark.html, без правки разметки.
   ══════════════════════════════════════════════════════════════════ */
.nt h1 { font-size: 20px; margin: 0 0 4px; font-weight: 500; }
.nt h2 { font-size: 16px; margin: 0 0 10px; font-weight: 500; }
.nt .subtitle { color: var(--muted); margin: 0 0 10px; font-size: 12px; }

/* Поля ввода вне .form-row (в таблицах, инлайн-формах) — чтобы нигде не
   оставалось белых браузерных полей на тёмном фоне. */
.nt input:not([type=checkbox]):not([type=radio]), .nt select, .nt textarea {
  background: var(--color-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
  font-family: inherit; font-size: 13px; max-width: 100%;
}
.nt input:focus-visible, .nt select:focus-visible, .nt textarea:focus-visible {
  border-color: var(--color-accent); outline: none;
}
.nt input[type=checkbox] { accent-color: var(--color-accent); }
.nt input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }

.nt .card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 0; box-shadow: none;
}

.nt .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 0; }
.nt .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.nt .stat .label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.nt .stat .value { font-size: 22px; font-weight: 600; }
.nt a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s; }
.nt a.stat:hover { box-shadow: 0 0 0 2px var(--border); }

.nt table { width: 100%; border-collapse: collapse; background: var(--card); color: var(--text); }
.nt table.card-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.nt th, .nt td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.nt th { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.nt th.sortable { cursor: pointer; user-select: none; }
.nt th.sortable:hover { color: var(--text); }
.nt th.sortable::after { content: "\2195"; margin-left: 4px; opacity: .35; font-size: 10px; }
.nt th.sortable.sort-asc::after { content: "\2191"; opacity: 1; color: var(--primary); }
.nt th.sortable.sort-desc::after { content: "\2193"; opacity: 1; color: var(--primary); }
.nt tr:last-child td { border-bottom: none; }
.nt td.num, .nt th.num { text-align: right; }

.nt .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.nt .badge.free { background: var(--color-green-bg); color: var(--color-green-fg); }
.nt .badge.medium { background: var(--color-amber-bg); color: var(--color-amber-fg); }
.nt .badge.high { background: var(--color-red-bg); color: var(--color-red-fg); }
.nt .badge.status { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200); }

.nt .btn {
  display: inline-block; background: var(--primary); color: var(--color-bg); border: none;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.nt .btn:hover { background: var(--color-accent-400); text-decoration: none; }
.nt .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.nt .btn.secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nt .btn.danger { background: var(--red); color: #2a0c12; }
.nt .btn.small { padding: 5px 10px; font-size: 12px; }

.nt form.inline { display: inline; }

.nt .form-row { margin-bottom: 12px; }
.nt .form-row label { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.nt .form-row input, .nt .form-row select, .nt .form-row textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: var(--color-bg); color: var(--text);
}
.nt .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }

.nt .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.nt .flash.success { background: var(--color-green-bg); color: var(--color-green-fg); }
.nt .flash.danger { background: var(--color-red-bg); color: var(--color-red-fg); }
.nt .flash.warning { background: var(--color-amber-bg); color: var(--color-amber-fg); }

.nt .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.nt .login-card { width: 340px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.nt .login-card h1 { text-align: center; margin-bottom: 22px; }

.nt .tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.nt .tabs a { padding: 8px 14px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; }
.nt .tabs a.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }

.nt .muted { color: var(--muted); }
.nt .empty { color: var(--muted); font-style: italic; padding: 20px 0; text-align: center; }

.nt-content.container-wide { max-width: 1560px; }

/* — dialog (модальное окно, напр. «Новая задача») — */
.nt-dialog-backdrop { position: fixed; inset: 0; background: rgba(11,12,20,.66); display: grid; place-items: center;
  padding: var(--space-8); z-index: 60; }
.nt-dialog { width: min(520px,100%); background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.nt-dialog-head { display: flex; align-items: center; gap: var(--space-3); }
.nt-dialog-head .title { font-size: 16px; font-weight: 500; flex: 1; }
.nt-dialog-head button { background: transparent; border: 0; color: color-mix(in srgb, var(--color-text) 50%, transparent);
  cursor: pointer; font-size: 15px; }

/* — компактная сводка в сайдбаре (напр. «Мои задачи» на странице «Мои
   задачи») — узкая колонка, поэтому пункты идут один под другим, а не
   сеткой, как основной .nt-stats в контенте. */
.nt-side-stats { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-text) 3%, transparent); box-shadow: var(--shadow-sm); }
.nt-side-stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.nt-side-stat .value { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.nt-side-stat .note { font-size: 10px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* — плитки статусов (крупнее, чем .tag) — */
.nt-status-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: var(--space-4); }
.nt-status-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); color: inherit; }
.nt-status-tile:hover { box-shadow: var(--shadow-md); }
.nt-status-tile.active { box-shadow: 0 0 0 1px var(--color-accent); }
.nt-status-tile .value { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }


/* ══════════════════════════════════════════════════════════════════════
   Светлая тема — те же компоненты и отступы, другая палитра. Включается
   атрибутом data-theme="light" на <html> (переключатель под логотипом в
   сайдбаре, выбор хранится в localStorage, применяется инлайн-скриптом в
   <head> до загрузки стилей, чтобы не мигало тёмным).
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* приглушённая светлая: серый фон без голубизны, карточки не чисто белые,
     текст графитовый, акцент спокойнее — меньше контраста и «звона» */
  --color-bg: #e6e8ee;
  --color-surface: #f6f7fa;
  --color-surface-2: color-mix(in srgb, #262a3d 5%, transparent);
  --color-text: #262a3d;
  --color-accent: #6457c4;
  --color-divider: color-mix(in srgb, #262a3d 13%, transparent);

  /* шкала акцента перевёрнута: «светлые» ступени (которыми в тёмной теме
     красится текст на тёмном фоне) становятся тёмно-фиолетовыми */
  --color-accent-100: #2b2741;
  --color-accent-200: #463b8f;
  --color-accent-300: #554a9c;
  --color-accent-400: #5347b3;
  --color-accent-500: #6457c4;
  --color-accent-600: #7d72d2;
  --color-accent-700: #a39be0;
  --color-accent-800: #d6d2f0;
  --color-accent-900: #e9e7f6;

  --color-red: #b9475e;
  --color-red-fg: #87243a;
  --color-red-bg: rgba(185,71,94,.12);
  --color-amber: #a87a12;
  --color-amber-fg: #674b08;
  --color-amber-bg: rgba(200,160,70,.20);
  --color-green: #2f8a5e;
  --color-green-fg: #1c5f40;
  --color-green-bg: rgba(47,138,94,.13);

  --shadow-sm: 0 0 0 1px #d7dae3;
  --shadow-md: 0 0 0 1px #c6cad6, 0 6px 18px rgba(38,42,61,.10);
  --shadow-lg: 0 0 0 1px #b9bdcb, 0 16px 40px rgba(38,42,61,.16);
}
:root[data-theme="light"] .nt { color-scheme: light; }
:root[data-theme="light"] .nt ::-webkit-scrollbar-thumb { background: #c0c4d0; }
/* сайдбар чуть темнее поля, как и в тёмной теме — читается структура */
:root[data-theme="light"] .nt-aside { background: linear-gradient(180deg,#dcdfe7,#e6e8ee); }
:root[data-theme="light"] .nt-logo-chip { background: #f6f7fa; box-shadow: 0 0 0 1px #d7dae3; }
:root[data-theme="light"] .nt input[type=date]::-webkit-calendar-picker-indicator { filter: none; }
:root[data-theme="light"] .nt-dialog-backdrop { background: rgba(38,42,61,.38); }
/* поля ввода — на тон светлее карточки, а не цвета фона страницы */
:root[data-theme="light"] .nt input:not([type=checkbox]):not([type=radio]), :root[data-theme="light"] .nt select,
:root[data-theme="light"] .nt textarea, :root[data-theme="light"] .nt .form-row input,
:root[data-theme="light"] .nt .form-row select, :root[data-theme="light"] .nt .form-row textarea { background: #fbfbfd; }
/* кнопки залиты акцентом (легаси-правило .nt .btn ниже по файлу) — на
   светлой теме текст на них белый, у контурной .secondary — обычный */
:root[data-theme="light"] .nt .btn { color: #fff; }
:root[data-theme="light"] .nt .btn.secondary { color: var(--color-text); }
:root[data-theme="light"] .nt .btn.danger { color: #fff; }
:root[data-theme="light"] .nt-seg button, :root[data-theme="light"] .nt-seg a { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
:root[data-theme="light"] .nt-seg button.active, :root[data-theme="light"] .nt-seg a.active { color: var(--color-accent-200); }
/* сводные строки таблиц и плитки — мягче, чем белое на сером */
:root[data-theme="light"] .nt th { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
:root[data-theme="light"] .nt-status-tile, :root[data-theme="light"] .nt-stat, :root[data-theme="light"] .nt .stat { background: var(--color-surface); }

/* заголовки и подписи на светлом: полупрозрачные оттенки, рассчитанные на
   тёмный фон, здесь сливаются — делаем заголовки темнее и плотнее, подписи
   контрастнее */
:root[data-theme="light"] .nt h1, :root[data-theme="light"] .nt h2, :root[data-theme="light"] .nt h3,
:root[data-theme="light"] .nt .card-title, :root[data-theme="light"] .nt-task-group-title,
:root[data-theme="light"] .nt-header h2, :root[data-theme="light"] .nt-dialog-head .title { color: #14172a; font-weight: 600; }
:root[data-theme="light"] .nt .kicker, :root[data-theme="light"] .nt-status-tile .kicker,
:root[data-theme="light"] .nt-side-stat .kicker, :root[data-theme="light"] .nt-stat .note,
:root[data-theme="light"] .nt-side-stat .note { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
:root[data-theme="light"] .nt th, :root[data-theme="light"] .nt-table .head { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
:root[data-theme="light"] .nt .muted, :root[data-theme="light"] .nt .subtitle,
:root[data-theme="light"] .nt label.nt-field, :root[data-theme="light"] .nt .form-row label,
:root[data-theme="light"] .nt .stat .label { color: color-mix(in srgb, var(--color-text) 66%, transparent); }
:root[data-theme="light"] .nt-nav a, :root[data-theme="light"] .nt-group summary { color: color-mix(in srgb, var(--color-text) 74%, transparent); }
:root[data-theme="light"] .nt-user .who .role, :root[data-theme="light"] .nt-user .logout,
:root[data-theme="light"] .nt-activity .item .when { color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* — переключатель темы под логотипом — */
.nt-theme { display: flex; justify-content: center; margin-top: var(--space-2); }
.nt-theme .nt-seg button { padding: 4px 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }

/* — сводные группы в «Все задачи» (по статусу / по фазам) — */
.nt-task-group { margin-top: var(--space-4); }
.nt-task-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); user-select: none; }
.nt-task-group > summary::-webkit-details-marker { display: none; }
.nt-task-group > summary:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.nt-task-group-title { font-size: 15px; font-weight: 500; }
.nt-task-group-caret { transition: transform .15s ease; font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.nt-task-group[open] > .nt-task-group-caret, .nt-task-group[open] > summary .nt-task-group-caret { transform: rotate(90deg); }
.nt-seg a { font: 400 12px var(--font-body); padding: var(--space-2) var(--space-4); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.nt-seg a + a { border-left: 1px solid var(--color-divider); }
.nt-seg a.active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-300); }