/* ===== FinZem UI Kit v3.1 — мост legacy-компонентов к v3.1 ===== */
/* Не меняет HTML-классы (.btn/.badge/.notification/.tabs), а приводит их */
/* визуальное оформление к языку v3.1 (ui-kit-v3.css). Подключается ПОСЛЕ */
/* tokens.css, поэтому использует новые токены (#159a68, Manrope и др.). */

/* --- Кнопки: основной контракт v3.1 без ломки компактных размеров --- */
.btn,
.btn-outline { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--brand, #159a68); border-color: var(--brand, #159a68); color: #fff; }
.btn-primary:hover { background: var(--brand-dark, #0d704c); border-color: var(--brand-dark, #0d704c); filter: none; }
.btn-outline { border-color: var(--line-strong, #bfcdc5); color: var(--ink, #10231c); }
.btn-outline:hover { background: var(--brand-soft, #e7f5ed); color: var(--brand-dark, #0d704c); filter: none; }
.btn-danger { background: var(--risk, #c84b4b); border-color: var(--risk, #c84b4b); }
.btn:focus-visible,
.btn-outline:focus-visible,
.paid-action:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #159a68) 40%, transparent); }

/* --- Бейджи → статусы (3px левый акцент, тона v3.1) --- */
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-style: solid; border-width: 1px; border-left-width: 3px; border-radius: 2px; font-size: 10px; font-weight: 750; line-height: 1; letter-spacing: .01em; }
.badge-green { color: var(--brand-dark, #0d704c); background: var(--brand-pale, #f0faf5); border-color: color-mix(in srgb, var(--brand, #159a68) 45%, var(--line, #d8e1dc)); border-left-color: var(--brand, #159a68); }
.badge-info { color: var(--info, #286e9b); background: var(--info-soft, #edf7fc); border-color: color-mix(in srgb, var(--info, #286e9b) 45%, var(--line, #d8e1dc)); border-left-color: var(--info, #286e9b); }
.badge-yellow { color: var(--warning, #a86f08); background: var(--warning-soft, #fff7df); border-color: color-mix(in srgb, var(--warning, #a86f08) 45%, var(--line, #d8e1dc)); border-left-color: var(--warning, #a86f08); }
.badge-red { color: var(--risk, #c84b4b); background: var(--risk-soft, #fff1f0); border-color: color-mix(in srgb, var(--risk, #c84b4b) 45%, var(--line, #d8e1dc)); border-left-color: var(--risk, #c84b4b); }
.badge-gray { color: var(--muted-2, #61736b); background: var(--secondary, #edf3ef); border-color: var(--line-strong, #bfcdc5); border-left-color: var(--muted-2, #61736b); }

/* --- Уведомления → notice (левый акцент 3px, тона v3.1) --- */
.notification { border-radius: 7px; border-style: solid; border-width: 1px 1px 1px 3px; box-shadow: none; }
.notification-error,
.notification-validation { border-color: var(--risk, #c84b4b); background: var(--risk-soft, #fff1f0); color: var(--risk, #c84b4b); }
.notification-success { border-color: var(--brand, #159a68); background: var(--brand-pale, #f0faf5); color: var(--brand-dark, #0d704c); }
.notification-info { border-color: var(--info, #286e9b); background: var(--info-soft, #edf7fc); color: var(--info, #286e9b); }
.notification-error .notification-marker,
.notification-validation .notification-marker { background: var(--risk, #c84b4b); }
.notification-success .notification-marker { background: var(--brand, #159a68); }
.notification-info .notification-marker { background: var(--info, #286e9b); }

/* --- Табы (.tabs/.seg) → вкладки v3.1 --- */
.tabs { background: var(--secondary, #edf3ef); border-color: var(--line, #d8e1dc); border-radius: 10px; padding: 3px; }
.seg { padding: 6px 12px; min-height: 34px; color: var(--ink-2, #334b41); border-radius: 7px; font-size: 13px; font-weight: 600; }
.seg:hover { color: var(--ink, #10231c); background: transparent; }
.seg.active { background: var(--surface, #ffffff); color: var(--ink, #10231c); box-shadow: 0 1px 3px rgba(16, 35, 28, .08); }

/* --- Поля форм (.form-group) → поля v3.1 (фокус и границы) --- */
.form-group input,
.form-group select,
.form-group textarea { border-color: var(--input, #cdd9d2); border-radius: 9px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--brand, #159a68); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #159a68) 18%, transparent); }

/* --- Новые компоненты .fz-* (слой Vue-виджетов), доступны глобально --- */
.fz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink, #10231c); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, filter .15s, opacity .15s; }
.fz-btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.fz-btn:disabled { opacity: .5; pointer-events: none; }
.fz-btn:focus-visible { outline: none; border-color: var(--brand, #159a68); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #159a68) 40%, transparent); }
.fz-btn[data-size="sm"] { min-height: 36px; padding: 0 14px; font-size: 13px; }
.fz-btn[data-size="xs"] { min-height: 28px; padding: 0 10px; font-size: 12px; gap: 6px; }
.fz-btn[data-size="icon"] { width: 36px; padding: 0; }
.fz-btn[data-size="icon-lg"] { width: 40px; height: 40px; padding: 0; }
.fz-btn[data-variant="primary"] { background: var(--brand, #159a68); border-color: var(--brand, #159a68); color: var(--primary-foreground, #fff); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.fz-btn[data-variant="primary"]:hover { background: var(--brand-dark, #0d704c); border-color: var(--brand-dark, #0d704c); }
a.fz-btn[data-variant="primary"],
a.fz-btn[data-variant="primary"]:visited { color: var(--primary-foreground, #fff); }
.fz-btn[data-variant="secondary"] { background: var(--surface, #ffffff); border-color: var(--line-strong, #bfcdc5); color: var(--ink, #10231c); box-shadow: none; }
.fz-btn[data-variant="secondary"]:hover { background: var(--brand-soft, #e7f5ed); color: var(--brand-dark, #0d704c); }
.fz-btn[data-variant="ghost"] { color: var(--ink-2, #334b41); }
.fz-btn[data-variant="ghost"]:hover { background: var(--brand-soft, #e7f5ed); color: var(--brand-dark, #0d704c); }
.fz-btn[data-variant="danger"] { background: var(--risk, #c84b4b); border-color: var(--risk, #c84b4b); color: #fff; }
.fz-btn[data-variant="paid"] { background: var(--paid, #8b3fc7); border-color: var(--paid, #8b3fc7); color: #fff; }
.fz-btn[data-variant="paid"]:not([data-size]) { min-height: 42px; }

.view-toggle { display: flex; }
.view-toggle button { border-radius: 0; margin-left: -1px; box-shadow: none; }
.view-toggle button:first-child { border-radius: 8px 0 0 8px; }
.view-toggle button:last-child { border-radius: 0 8px 8px 0; }
.view-toggle button[aria-pressed="true"] { z-index: 1; color: var(--brand-dark, #0d704c); background: var(--brand-soft, #e7f5ed); border-color: var(--brand, #159a68); }

/* --- Контейнер коллекции FzCollection --- */
.fz-collection-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px 12px; border-bottom: 1px solid var(--line, #d8e1dc); margin: 0 0 16px; }
.goal-context-card > .fz-collection > .fz-collection-head { margin: 0 -20px 16px; }
.fz-collection-title, h2.fz-collection-title { margin: 0; border: 0; padding: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
.fz-collection-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fz-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fz-collection-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.navigation-surface > .fz-collection > .fz-collection-list, .navigation-surface > .fz-collection > .fz-collection-grid { padding: 2px 20px 24px; }
.navigation-surface > .fz-collection > .fz-collection-state, .navigation-surface > .fz-collection > .fz-collection-empty, .navigation-surface > .fz-collection > .fz-collection-table { margin: 0 20px 24px; }
.fz-collection-table { width: 100%; overflow-x: auto; }
.fz-collection-table table { min-width: 620px; width: 100%; border-collapse: collapse; }
.fz-collection-state, .fz-collection-empty { text-align: center; padding: 40px 20px; color: var(--muted-2, #61736b); font-size: .85rem; }
.fz-collection-error { color: var(--risk, #c84b4b); }
@media (max-width: 900px) { .fz-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fz-collection-grid { grid-template-columns: 1fr; } }

/* --- Навигация (.breadcrumbs + .fz-tabs), как в UI Kit 04 --- */
.breadcrumbs { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-bottom: 1px solid var(--line, #d8e1dc); background: var(--brand-air, #fafefc); color: var(--muted-2, #61736b); font-size: 12px; }
.breadcrumbs a { color: var(--brand-dark, #0d704c); font-weight: 650; text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand, #159a68); }
.breadcrumbs svg { width: 14px; height: 14px; flex-shrink: 0; }
.breadcrumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigation-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--line, #d8e1dc); }
.fz-tabs [data-slot="tabs-list"] { display: inline-flex; min-height: 40px; padding: 3px; background: var(--secondary, #edf3ef); border-radius: 10px; }
.fz-tabs [data-slot="tabs-trigger"] { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2, #334b41); font-size: 13px; font-weight: 600; cursor: pointer; }
.fz-tabs [data-slot="tabs-trigger"]:hover { color: var(--ink, #10231c); }
.fz-tabs [data-slot="tabs-trigger"][aria-selected="true"] { background: var(--surface, #ffffff); color: var(--ink, #10231c); box-shadow: 0 1px 3px rgba(16, 35, 28, .08); }
.fz-tabs [data-slot="tabs-trigger"] > [data-slot="badge"] { min-width: 18px; padding: 2px 5px; color: var(--muted-2, #61736b); background: var(--surface, #ffffff); border-radius: 99px; font-size: 9px; text-align: center; }
/* Табы «Расчёты / Сценарии» в шапке коллекции: светлая подложка + scale 0.9. */
.fz-collection-actions .fz-tabs { transform: scale(.9); transform-origin: right center; }
.fz-collection-actions .fz-tabs [data-slot="tabs-list"] { background: var(--brand-soft, #e7f5ed); }
.fz-collection-actions .fz-tabs [data-slot="tabs-trigger"] { color: var(--brand-dark, #0d704c); }
.fz-collection-actions .fz-tabs [data-slot="tabs-trigger"]:hover { color: var(--brand, #159a68); }
.fz-collection-actions .fz-tabs [data-slot="tabs-trigger"][aria-selected="true"] { background: var(--surface, #ffffff); color: var(--ink, #10231c); box-shadow: 0 1px 3px rgba(16, 35, 28, .08); }
/* Хлебные крошки в карточках целей/участков — на всю ширину карточки (как в UI Kit 04). */
.goal-context-card > .breadcrumbs { margin: -20px -20px 0px; }
.goal-context-card > .goal-box-head { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
@media (max-width: 820px) { .navigation-row { align-items: flex-start; flex-direction: column; } .fz-tabs { width: 100%; overflow-x: auto; } }
@media (max-width: 560px) { .breadcrumbs { padding-inline: 14px; } .navigation-row { padding: 18px 14px; } }

/* --- Страница «Задачи»: компоновка поверх UI Kit v3 --- */
.goal-heading h2 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
.goal-heading p { margin: 8px 0 0; color: var(--muted-2, #61736b); font-size: 14px; line-height: 1.65; }
.goal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.goal-body { padding: 0 20px 24px; }
.goal-state, .goal-empty { text-align: center; padding: 48px 20px; color: var(--muted-2, #61736b); font-size: .85rem; }
.goal-empty strong { display: block; margin-bottom: 8px; font-size: 1rem; color: var(--ink, #10231c); }

/* Карточка задачи (grid — вертикальная, list — горизонтальная) */
.goal-card-v3 { display: flex; flex-direction: column; gap: 16px; padding: 22px; box-shadow: var(--shadow); }
.goal-card-v3-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.goal-card-v3-title a { color: var(--ink, #10231c); text-decoration: none; }
.goal-card-v3-title a:hover { color: var(--brand, #159a68); }
.goal-card-v3-sub { margin: 4px 0 0; color: var(--muted-2, #61736b); font-size: 12px; line-height: 1.4; }
.goal-card-v3-facts { grid-template-columns: repeat(2, 1fr); }
.goal-card-v3-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.goal-card-v3-actions-right { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.goal-card-v3--list { flex-direction: row; align-items: center; }
.goal-card-v3--list .goal-card-v3-main { flex: 1; min-width: 0; }
.goal-card-v3--list .goal-card-v3-actions { margin-top: 0; margin-left: auto; }
.goal-card-v3-main { min-width: 0; }
@media (max-width: 600px) { .goal-card-v3--list { flex-direction: column; align-items: stretch; } .goal-card-v3--list .goal-card-v3-actions { margin-left: 0; } }