/* styles/components/home-v6.css — «Главная v6» (/dashboard-v6). Bento 6×5 по эталону claude.ai/artifact/7Jyp4FpoxbtwHr7C4S4Njb.
   Только токены проекта (скин classic | noir их переопределяет) - ни одного hex. Шрифты проекта не меняем.
   Движение только функциональное: отклик наведения на карточку, плавное заполнение полос. prefers-reduced-motion - без переходов. */

.hv6 {
  --good: var(--status-success);
  --warn: var(--status-warning);
  --bad: var(--status-danger);
  --v6-line: var(--border-default, var(--border));
  --v6-card: var(--bg-card, var(--bg-secondary));
  --v6-row: var(--bg-secondary, var(--bg-card));
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0 24px;
  color: var(--text-primary);
}
.hv6 *, .hv6 *::before, .hv6 *::after { box-sizing: border-box; }
.hv6 a { color: inherit; text-decoration: none; }
.hv6 button { font: inherit; cursor: pointer; }
.hv6 [hidden] { display: none !important; }

/* ── лента курсов ─────────────────────────────────────────────────────────── */
.hv6-ticker { display: flex; align-items: center; height: 30px; border-bottom: 1px solid var(--v6-line); background: var(--v6-card); overflow: hidden; font: 500 11px var(--font-mono); color: var(--text-secondary); }
.hv6-tk-lab { flex: none; padding: 0 14px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.hv6-tk-clip { flex: 1; overflow: hidden; }
.hv6-tk-track { display: flex; gap: 32px; padding-right: 32px; width: max-content; white-space: nowrap; animation: hv6-tk 70s linear infinite; }
.hv6-tk-track:hover { animation-play-state: paused; }
.hv6-tk-track .tk-item { display: inline-flex; gap: 7px; align-items: center; }
.hv6-tk-track b { color: var(--text-primary); font-weight: 600; }
.hv6-tk-track .up { color: var(--good); } .hv6-tk-track .dn { color: var(--bad); }
@keyframes hv6-tk { to { transform: translateX(-50%); } }
/* Компьютер: лента курсов прижата к полосе городов в шапке и тянется от края до края (как сама шапка): убираем верхний отступ <main> и вылетаем за его боковые 32px */
@media (min-width: 769px) {
  #app-main:has(> .hv6) { padding-top: 0; }
  .hv6-ticker { margin: 0 -32px; }
}

/* ── шапка: приветствие, светофор, часы ───────────────────────────────────── */
.hv6-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── сетка bento: 6 колонок, 5 рядов по 200 + низ 240 ───────────────────── */
.hv6-grid {
  display: grid; gap: 14px; padding: 16px 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, 200px) 240px;
  grid-template-areas:
    "ctrl  ctrl  cal   cal   team    team"
    "srv   srv   cal   cal   leader  leader"
    "srv   srv   cal   cal   leader  leader"
    "strat strat plan  plan  outside outside"
    "dog   dog   plan  plan  outside outside"
    "bday  bday  bday  news  news    news";
}
.ga-ctrl { grid-area: ctrl; } .ga-cal { grid-area: cal; } .ga-team { grid-area: team; } .ga-srv { grid-area: srv; }
.ga-leader { grid-area: leader; } .ga-strat { grid-area: strat; } .ga-plan { grid-area: plan; } .ga-outside { grid-area: outside; }
.ga-dog { grid-area: dog; } .ga-bday { grid-area: bday; } .ga-news { grid-area: news; }

.hv6-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--v6-line); border-radius: var(--radius-xl, 14px); background: var(--v6-card); box-shadow: var(--shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; }
.hv6-card:hover { border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--v6-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 18%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--accent-primary) 40%, transparent); }
.hv6-card--good:hover { border-color: color-mix(in srgb, var(--good) 50%, var(--v6-line)); box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--good) 45%, transparent); }
.hv6-card--warn:hover { border-color: color-mix(in srgb, var(--warn) 50%, var(--v6-line)); box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--warn) 45%, transparent); }
.hv6-hd { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.hv6-hd h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.hv6-hd h3 svg { width: 14px; height: 14px; flex: none; }
.hv6-card--good .hv6-hd h3 { color: var(--good); } .hv6-card--warn .hv6-hd h3 { color: var(--warn); }
.hv6-tag { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.hv6-tag:empty { display: none; }
.hv6-tag.is-bad { padding: 2px 8px; border-radius: 6px; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.hv6-tag + .hv6-lk { margin-left: 4px; }
.hv6-lk { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent-primary); white-space: nowrap; }
.hv6-lk:hover { text-decoration: underline; }
.hv6-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, var(--v6-line)) transparent; }

/* ── общие элементы ───────────────────────────────────────────────────────── */
.hv6-skel { display: grid; gap: 10px; padding: 8px 14px; }
.hv6-skel i { display: block; height: 14px; border-radius: 6px; background: var(--v6-row); animation: hv6-pulse 1.4s ease-in-out infinite; }
.hv6-skel i:nth-child(2) { width: 80%; } .hv6-skel i:nth-child(3) { width: 60%; }
@keyframes hv6-pulse { 50% { opacity: .45; } }
.hv6-empty { margin: 0; padding: 14px; font-size: 12px; color: var(--text-muted); }
.hv6-empty--nodata b { display: block; margin-bottom: 3px; font-size: 12px; color: var(--text-secondary); }
.hv6-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--v6-line); font-size: 13px; }
.hv6-row:last-child { border-bottom: 0; }
.hv6-row span { color: var(--text-secondary); }
.hv6-row b { font: 700 13px var(--font-mono); font-variant-numeric: tabular-nums; }
.hv6-row.is-warn b { color: var(--warn); } .hv6-row.is-bad b { color: var(--bad); }
.hv6-av { position: relative; overflow: hidden; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--text-inverse, var(--text-primary)); border: 2px solid var(--v6-card); }
.hv6-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv6-av--xs { width: 20px; height: 20px; font-size: 8px; margin-left: -5px; } .hv6-av--xs:first-child { margin-left: 0; }
.hv6-av--lg { width: 40px; height: 40px; font-size: 13px; }
.hv6-av--more { background: var(--v6-row); color: var(--text-secondary); }
.hv6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 8px; background: var(--accent-primary); color: var(--text-inverse); font-size: 11px; font-weight: 700; letter-spacing: .3px; transition: background .15s; }
.hv6-btn:hover { background: var(--accent-hover, var(--accent-primary)); }
.hv6-btn:disabled { opacity: .55; cursor: default; }
.hv6-btn svg { width: 14px; height: 14px; }
.hv6-btn--wide { width: calc(100% - 28px); margin: 8px 14px 12px; }
.hv6-btn--ic { width: 32px; height: 32px; padding: 0; }
.hv6-in { display: flex; gap: 8px; align-items: center; padding: 8px 14px; }
.hv6-in input { flex: 1; min-width: 0; padding: 7px 11px; border: 1px solid var(--v6-line); border-radius: 8px; background: var(--v6-row); color: var(--text-primary); font: 400 12px var(--font-sans); outline: none; }
.hv6-in input::placeholder { color: var(--text-muted); }
.hv6-in input:focus-visible { border-color: var(--border-focus, var(--accent-primary)); }
.hv6-btn:focus-visible, .hv6-lk:focus-visible, .hv6 a:focus-visible, .hv6 button:focus-visible { outline: 2px solid var(--border-focus, var(--accent-primary)); outline-offset: 2px; }
.hv6-done { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* ── Контроль исполнения ──────────────────────────────────────────────────── */
.hv6-ctrl { display: block; padding: 0 14px 10px; }
.hv6-cr { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--v6-line); font-size: 13px; }
.hv6-cr:last-child { border-bottom: 0; }
.hv6-cr:hover .hv6-cr-tt { color: var(--text-primary); }
.hv6-cr-ic { display: grid; place-items: center; width: 20px; color: var(--text-muted); } .hv6-cr-ic svg { width: 16px; height: 16px; }
.hv6-cr-tt { flex: 1; color: var(--text-secondary); font-weight: 500; transition: color .15s; }
.hv6-cr-v { font: 700 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.hv6-cr-v small { margin-left: 2px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.hv6-cr-v.is-warn { color: var(--warn); } .hv6-cr-v.is-bad { color: var(--bad); }

/* ── Срывы и разборы ──────────────────────────────────────────────────────── */
.hv6-srl { display: grid; padding: 0 8px 8px; }
.hv6-sr { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 9px; transition: background .15s; }
.hv6-sr:hover { background: var(--v6-row); }
.hv6-sr-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } .hv6-sr-ic svg { width: 13px; height: 13px; }
.hv6-sr-tt { min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.hv6-id { display: block; font: 500 10px var(--font-mono); letter-spacing: .3px; color: var(--text-muted); }
.hv6-sr-who { display: flex; margin-top: 4px; }
.hv6-sr-dt { text-align: right; white-space: nowrap; }
.hv6-sr-dt b { display: block; font: 700 15px/1 var(--font-mono); color: var(--bad); }
.hv6-sr-dt small { font-size: 9px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }

/* ── Стратегические проекты ───────────────────────────────────────────────── */
.hv6-pj { display: grid; gap: 8px; padding: 0 14px 12px; }
.hv6-p { padding: 9px 10px; border: 1px solid var(--v6-line); border-radius: 10px; background: var(--v6-row); }
.hv6-p-tt { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.hv6-bar { height: 5px; overflow: hidden; border-radius: 3px; background: var(--v6-line); }
.hv6-bar i { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width .5s ease; }
.hv6-bar i.is-bad { background: var(--bad); }
.hv6-p-ft { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.hv6-p-ft b { font: 600 11px var(--font-mono); color: var(--text-primary); }

/* ── Договоры, Торжества ──────────────────────────────────────────────────── */
.hv6-dr, .hv6-bd { padding: 0 14px 10px; }
.hv6-bd .hv6-row b { font: 600 12px var(--font-sans); text-align: right; }
.hv6-bd-today { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--warn) 9%, transparent); }
.hv6-bd-today div { flex: 1; min-width: 0; } .hv6-bd-today b { display: block; font-size: 14px; } .hv6-bd-today span { font-size: 11px; color: var(--text-secondary); }
.hv6-bd-today .hv6-btn { background: var(--warn); }

/* ── Кто в офисе ──────────────────────────────────────────────────────────── */
.hv6-pres { display: grid; gap: 10px; align-content: space-between; height: 100%; padding: 4px 14px 14px; }
.hv6-pres-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--v6-line); border-left: 3px solid var(--status-office); border-radius: 9px; background: var(--v6-row); }
.hv6-pres-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary); }
.hv6-pres-lbl b { font: 700 22px/1 var(--font-mono); color: var(--status-office); }
.hv6-pres-lbl small { font: 500 12px var(--font-mono); color: var(--text-muted); }
.hv6-sdot { width: 8px; height: 8px; border-radius: 50%; }
.hv6-stack { display: flex; } .hv6-stack .hv6-av { width: 26px; height: 26px; margin-left: -7px; font-size: 9px; border-color: var(--v6-row); } .hv6-stack .hv6-av:first-child { margin-left: 0; }
.hv6-pres-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hv6-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--v6-line); border-left: 2px solid var(--c); border-radius: 8px; background: var(--v6-row); }
.hv6-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.hv6-chip b { font: 700 14px var(--font-mono); }

/* ── Лидеры / Аутсайдеры ──────────────────────────────────────────────────── */
.hv6-lb { padding: 0 10px 10px; }
.hv6-rw { display: grid; grid-template-columns: 16px 32px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px 6px 2px; border-radius: 9px; }
.hv6-rw:hover { background: var(--v6-row); }
.hv6-rank { font: 600 12px var(--font-mono); text-align: center; color: var(--text-muted); }
.hv6-avwrap { position: relative; display: block; }
.hv6-crown { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 14px; height: 14px; border: 2px solid var(--v6-card); border-radius: 50%; background: var(--warn); }
.hv6-crown svg { width: 8px; height: 8px; fill: var(--text-inverse); }
.hv6-nm { min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.hv6-nm small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-size: 10px; font-weight: 500; color: var(--text-muted); }
.hv6-mt { font: 700 13px var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hv6-mt small { display: block; margin-top: 1px; font: 500 9px var(--font-sans); letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.hv6-mt--good { color: var(--good); } .hv6-mt--warn { color: var(--warn); } .hv6-mt--bad { color: var(--bad); } .hv6-mt--muted { color: var(--text-muted); }

/* ── Новости ──────────────────────────────────────────────────────────────── */
.hv6-in:not(.hv6-in--add) { border-bottom: 1px solid var(--v6-line); }
.hv6-nws { padding: 4px 10px 10px; }
.hv6-nw { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 8px; border-radius: 8px; }
.hv6-nw:hover { background: var(--v6-row); }
.hv6-nw-tt { min-width: 0; font-size: 12px; line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.hv6-nw-tt span { display: block; margin-top: 2px; font-size: 10px; color: var(--text-muted); }

/* ── Планнер ──────────────────────────────────────────────────────────────── */
.ga-plan .hv6-body { display: flex; flex-direction: column; overflow: hidden; }
.hv6-pl-head { flex: none; display: grid; gap: 8px; padding: 2px 14px 10px; border-bottom: 1px solid var(--v6-line); }
.hv6-pl-info { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.hv6-pl-info b { font: 700 13px var(--font-mono); color: var(--good); }
.hv6-disc[data-tone="warn"] .hv6-pl-info b { color: var(--warn); } .hv6-disc[data-tone="bad"] .hv6-pl-info b { color: var(--bad); }
.hv6-disc[data-tone="warn"] .hv6-bar i { background: var(--warn); } .hv6-disc[data-tone="bad"] .hv6-bar i { background: var(--bad); }
.hv6-disc .hv6-bar { margin-top: 6px; }
.hv6-tasks { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px; scrollbar-width: thin; }
.hv6-task { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-radius: 8px; transition: opacity .25s; }
.hv6-task:hover { background: var(--v6-row); }
.hv6-task.is-done { opacity: .4; } .hv6-task.is-done .hv6-task-tt { text-decoration: line-through; }
.hv6-chk { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--border-strong, var(--v6-line)); border-radius: 6px; background: transparent; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.hv6-chk svg { width: 12px; height: 12px; stroke-width: 3; }
.hv6-chk:hover, .hv6-task.is-done .hv6-chk { border-color: var(--good); background: var(--good); color: var(--text-inverse); }
.hv6-task-tt { min-width: 0; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.hv6-task-tt small { display: block; font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.hv6-due { font: 600 11px var(--font-mono); color: var(--text-muted); } .hv6-due.is-bad { color: var(--bad); }
.hv6-in--add { flex: none; border-top: 1px solid var(--v6-line); padding: 10px 14px; }

/* ── Календарь ────────────────────────────────────────────────────────────── */
.hv6-cal { padding: 2px 14px 12px; }
.hv6-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.hv6-cal-nav { display: flex; gap: 4px; }
.hv6-sq { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0; border: 1px solid var(--v6-line); border-radius: 7px; background: var(--v6-row); color: var(--text-secondary); }
.hv6-sq:hover { color: var(--text-primary); border-color: var(--border-strong, var(--v6-line)); }
.hv6-sq svg { width: 13px; height: 13px; }
.hv6-sq--txt { padding: 0 9px; font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.hv6-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hv6-dow { padding: 3px 0; font-size: 9.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; text-align: center; color: var(--text-muted); }
.hv6-dow.is-we { color: var(--bad); }
.hv6-d { position: relative; display: grid; place-items: center; align-content: center; height: 31px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); font: 500 12px var(--font-mono); font-variant-numeric: tabular-nums; }
.hv6-d:hover { background: var(--v6-row); }
.hv6-d.is-out { opacity: .4; } .hv6-d.is-we { color: var(--bad); }
.hv6-d.is-sel { box-shadow: inset 0 0 0 1.5px var(--accent-primary); }
.hv6-d.is-today { background: var(--accent-primary); color: var(--text-inverse); font-weight: 700; }
.hv6-dots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.hv6-dots u { width: 4px; height: 4px; border-radius: 50%; background: var(--good); }
.hv6-dots u.is-red { background: var(--bad); } .hv6-dots u.is-yellow { background: var(--warn); }
.hv6-d.is-today .hv6-dots u { box-shadow: 0 0 0 1px var(--accent-primary); }
.hv6-day { margin: 8px -14px -12px; border-top: 1px solid var(--v6-line); }
.hv6-day-hd { padding: 9px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); }
.hv6-ev { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; padding: 6px 14px; border-left: 3px solid var(--good); margin: 2px 14px 2px 0; }
.hv6-ev--red { border-left-color: var(--bad); } .hv6-ev--yellow { border-left-color: var(--warn); }
.hv6-ev-t { font: 600 11px var(--font-mono); color: var(--text-secondary); }
.hv6-ev-x b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .hv6-ev-x small { font-size: 10.5px; color: var(--text-muted); }

/* ── планшет: 2 колонки ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hv6-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 12px; padding: 12px;
    grid-template-areas: "ctrl cal" "srv cal" "strat plan" "dog plan" "team leader" "outside outside" "bday news"; }
  .hv6-card { min-height: 200px; }
  .ga-outside { min-height: 260px; }
}
/* ── телефон: одна колонка ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hv6-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px;
    grid-template-areas: "ctrl" "team" "srv" "cal" "plan" "leader" "outside" "strat" "dog" "bday" "news"; }
  .hv6-card { min-height: auto; }
  .hv6-body { overflow: visible; }
  .ga-plan .hv6-body { overflow: visible; }
  .hv6-tasks { overflow: visible; }
  .hv6-card:hover { box-shadow: var(--shadow-sm); border-color: var(--v6-line); }
}
@media (prefers-reduced-motion: reduce) {
  .hv6 *, .hv6 *::before, .hv6 *::after { animation: none !important; transition: none !important; }
}