/* Home/Index — метрики, списки заявок/активности, быстрые действия (вынесено из Index.cshtml). */

.vd-stat-grid {
    display: grid;
    gap: 1rem;
    /* Колонки — vd-zoom-stability.css (4 / 2 / 1) */
}

.vd-stat-card {
    padding: 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vd-stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.vd-stat-card-link:hover {
    color: inherit;
}

.vd-stat-card:hover,
.vd-stat-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--vd-shadow-lg);
}

.vd-stat-spark {
    flex-shrink: 0;
    opacity: 0.95;
}

.vd-stat-delta {
    font-size: 0.72rem;
    margin-top: 0.45rem;
    line-height: 1.25;
    color: var(--vd-text-muted);
}

.vd-stat-delta--up {
    color: var(--vd-stat-delta-up);
}

.vd-stat-delta--dn {
    color: var(--vd-stat-delta-dn);
}

.vd-stat-delta--muted {
    color: var(--vd-text-muted);
}

.vd-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid transparent;
}

/* S1: метрики — плотнее и контрастнее на любом фоне */
.vd-home .vd-stat-grid .vd-stat-card.vd-glass-card {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--vd-panel-strong) 92%, transparent) 0%,
        color-mix(in srgb, var(--vd-glass-card-to) 88%, var(--vd-panel-strong)) 100%
    );
    border: 1px solid var(--vd-border-strong);
    box-shadow: var(--vd-shadow-md);
}

.vd-home .vd-stat-icon[class*="vd-chip-"] {
    border-width: 1px;
    border-style: solid;
}

.vd-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--vd-text);
}

.vd-stat-label {
    font-size: 0.85rem;
    color: var(--vd-text-muted);
    margin-top: 0.2rem;
}

.vd-stat-label--inline {
    margin-top: 0;
    font-weight: 600;
    font-size: 0.8rem;
}

.vd-stat-value--center {
    font-size: 1.85rem;
}

.vd-stat-value--v2-main {
    font-size: 1.65rem;
    line-height: 1.15;
}

.vd-stat-side-line {
    line-height: 1.35;
}

/* Светлые офисные темы: градиент заголовка героя (не трогаем Vibe). */
body:not([data-color-palette="vibe"]) .vd-home-hero .vd-text-gradient {
    background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 55%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

body[data-color-palette="vibe"] .vd-home-hero .vd-text-gradient {
    background: linear-gradient(135deg, #faf5ff 0%, #f0abfc 26%, #e879f9 48%, #a855f7 72%, #ddd6fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vd-stat-card--v0 {
    padding: 1rem 1.1rem;
}

.vd-stat-card--v1,
.vd-stat-card--v2 {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1rem 0.65rem;
    min-height: 9.25rem;
}

/* Метрики v1/v2: светлый «офисный» градиент только вне Vibe */
body:not([data-color-palette="vibe"]) .vd-stat-card--v1,
body:not([data-color-palette="vibe"]) .vd-stat-card--v2 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(241, 245, 249, 0.92) 45%, rgba(226, 232, 240, 0.55) 100%);
    border: 1px solid var(--vd-border-soft) !important;
}

body[data-color-palette="vibe"] .vd-stat-card--v1,
body[data-color-palette="vibe"] .vd-stat-card--v2 {
    background: linear-gradient(180deg, rgba(46, 32, 74, 0.5) 0%, rgba(22, 14, 38, 0.88) 48%, rgba(36, 24, 62, 0.52) 100%);
    border: 1px solid var(--vd-border) !important;
    box-shadow: var(--vd-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vd-stat-card--v1 .vd-stat-spark-full,
.vd-stat-card--v2 .vd-stat-spark-full {
    margin-top: auto;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0.25rem 0.65rem 0;
    border-top: 1px solid var(--vd-border-soft);
}

body:not([data-color-palette="vibe"]) .vd-stat-card--v1 .vd-stat-spark-full,
body:not([data-color-palette="vibe"]) .vd-stat-card--v2 .vd-stat-spark-full {
    background: rgba(255, 255, 255, 0.35);
}

body[data-color-palette="vibe"] .vd-stat-card--v1 .vd-stat-spark-full,
body[data-color-palette="vibe"] .vd-stat-card--v2 .vd-stat-spark-full {
    background: rgba(26, 17, 40, 0.5);
    border-top-color: var(--vd-border-soft);
}

.vd-stat-grid--layout-1 {
    align-items: stretch;
}

.vd-ticket-list {
    border-top: 1px solid var(--vd-border-strong);
}

.vd-ticket-list .vd-ticket-row {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--vd-text);
    border-bottom: 1px solid var(--vd-border-strong);
    transition: background-color 0.15s ease;
}

.vd-ticket-list .vd-ticket-row:last-child {
    border-bottom: none;
}

.vd-ticket-list .vd-ticket-row:hover {
    background: color-mix(in srgb, var(--vd-panel-soft) 88%, var(--vd-accent-soft));
    color: var(--vd-text-strong);
}

.vd-ticket-list .vd-ticket-title {
    color: var(--vd-text);
}

.vd-ticket-list .vd-ticket-row:hover .vd-ticket-title {
    color: var(--vd-accent-strong);
}

.vd-ticket-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--vd-border-soft);
}

.vd-ticket-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vd-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.65rem;
}

.vd-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--vd-radius-md);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    color: var(--vd-text);
    background: color-mix(in srgb, var(--vd-panel-strong) 92%, transparent);
    border: 1px solid var(--vd-border-soft);
    box-shadow: var(--vd-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 5.5rem;
}

.vd-quick-tile-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid transparent;
}

.vd-quick-tile-label {
    line-height: 1.2;
}

.vd-quick-tile--violet .vd-quick-tile-icon { background: var(--vd-chip-violet-bg); color: var(--vd-chip-violet-text); border-color: var(--vd-chip-violet-border); }
.vd-quick-tile--blue .vd-quick-tile-icon { background: var(--vd-chip-blue-bg); color: var(--vd-chip-blue-text); border-color: var(--vd-chip-blue-border); }
.vd-quick-tile--emerald .vd-quick-tile-icon { background: var(--vd-chip-emerald-bg); color: var(--vd-chip-emerald-text); border-color: var(--vd-chip-emerald-border); }
.vd-quick-tile--yellow .vd-quick-tile-icon { background: var(--vd-chip-yellow-bg); color: var(--vd-chip-yellow-text); border-color: var(--vd-chip-yellow-border); }
.vd-quick-tile--orange .vd-quick-tile-icon { background: var(--vd-chip-orange-bg); color: var(--vd-chip-orange-text); border-color: var(--vd-chip-orange-border); }
.vd-quick-tile--gray .vd-quick-tile-icon { background: var(--vd-chip-gray-bg); color: var(--vd-chip-gray-text); border-color: var(--vd-chip-gray-border); }

.vd-quick-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--vd-shadow-md);
    border-color: color-mix(in srgb, var(--vd-accent) 35%, var(--vd-border-soft));
    color: var(--vd-text-strong);
}

.vd-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vd-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--vd-border-soft);
}

.vd-activity-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.vd-activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vd-mood-btn {
    font-size: 1.1rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.45rem;
    background: var(--vd-panel-soft);
    color: var(--vd-text);
    border: 1px solid var(--vd-border);
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.vd-mood-btn:hover {
    background: var(--vd-accent-soft);
    border-color: var(--vd-accent);
    transform: translateY(-1px);
    color: var(--vd-text-strong);
}

/* S1: лента событий (мини) */
.vd-mini-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vd-mini-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.5rem;
    border-radius: var(--vd-radius-sm);
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.vd-mini-feed-item:hover {
    background: var(--vd-panel-soft);
    border-color: var(--vd-border-soft);
}

.vd-mini-feed-icon {
    flex-shrink: 0;
    width: 1.5rem;
    color: var(--vd-accent);
    font-size: 1.35rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.vd-mini-feed-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vd-text);
    line-height: 1.3;
}

.vd-mini-feed-text {
    font-size: 0.78rem;
    color: var(--vd-text-muted);
    margin-top: 0.15rem;
    line-height: 1.35;
}

.vd-mini-feed-time {
    font-size: 0.72rem;
    color: var(--vd-text-faint);
    margin-top: 0.25rem;
}

.vd-home-tickets-card .vd-ticket-list {
    border-top: none;
}

/* Лента событий (/Home/Feed): шапка и панель фильтра — chrome как sidebar / мессенджер */
body.zen-body .vd-home-feed .card-header.vd-card-head {
    background: linear-gradient(180deg, var(--vd-chrome-bg-soft) 0%, var(--vd-chrome-bg) 100%) !important;
    color: var(--vd-chrome-text) !important;
    border-bottom: 1px solid var(--vd-chrome-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.zen-body .vd-home-feed .card-header.vd-card-head.vd-card-head--subtle {
    border-bottom-color: var(--vd-chrome-border) !important;
}

body.zen-body .vd-home-feed .card-header.vd-card-head .vd-card-head-title,
body.zen-body .vd-home-feed .card-header.vd-card-head i {
    color: var(--vd-chrome-text) !important;
    text-shadow: none;
}

body.zen-body .vd-home-feed .card-header.vd-card-head .text-muted {
    color: var(--vd-chrome-text-muted) !important;
    text-shadow: none;
}

body.zen-body .vd-home-feed .card-body.bg-unified {
    background: linear-gradient(135deg, var(--vd-chrome-gradient-135-from) 0%, var(--vd-chrome-gradient-135-to) 100%) !important;
    background-color: transparent !important;
    color: var(--vd-chrome-text) !important;
    border-color: var(--vd-chrome-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.vd-home-persona-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--vd-accent) 22%, transparent);
    color: var(--vd-text);
    border: 1px solid color-mix(in srgb, var(--vd-accent) 38%, transparent);
}

.vd-home--operations .vd-home-reports-cta {
    border-left: 3px solid color-mix(in srgb, var(--vd-accent) 55%, transparent);
}

.vd-home--dashboard .vd-home-muted {
    color: var(--vd-text-muted);
}

.vd-home-ops-analytics {
    padding: 0.75rem 0.85rem;
    border-left: 3px solid color-mix(in srgb, var(--vd-accent) 55%, transparent);
}

.vd-home-ops-analytics-title {
    font-weight: 700;
}

.vd-home-ops-metrics {
    --vd-home-metric-gap: 0.5rem;
}

.vd-home-ops-metrics .border-top {
    border-color: color-mix(in srgb, var(--vd-border) 70%, transparent) !important;
}

.vd-home-ops-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vd-home-metric-gap);
}

@media (max-width: 767.98px) {
    .vd-home-ops-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vd-home-ops-metric {
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--vd-surface) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--vd-border) 65%, transparent);
}

.vd-home-ops-metric-label {
    display: block;
    font-size: 0.68rem;
    color: var(--vd-text-muted);
    margin-bottom: 0.1rem;
}

.vd-home-ops-metric-value {
    font-size: 0.95rem;
    color: var(--vd-text);
}

.vd-home-mid-row {
    align-items: stretch;
}

.vd-home-mid-row .vd-home-quick-card {
    margin-bottom: 0 !important;
    height: 100%;
}

.vd-home--dashboard .vd-home-main-row {
    margin-top: 0;
}

.vd-stat-grid--user {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .vd-stat-grid--user {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vd-home-hero-subtitle {
    max-width: 42rem;
}

/* ─── Compact mockup layout (variant 3) ─────────────────────────── */
.vd-home--compact {
    --vd-home-kpi-h: 4.75rem;
}

.vd-stat-grid--layout-3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 1199.98px) {
    .vd-stat-grid--layout-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .vd-stat-grid--layout-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vd-stat-card--compact {
    padding: 0.55rem 0.65rem 0.45rem;
    min-height: var(--vd-home-kpi-h);
    display: flex;
    flex-direction: column;
}

.vd-stat-card--compact:hover {
    transform: translateY(-1px);
}

.vd-stat-compact-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
}

.vd-stat-value--compact {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.vd-stat-label--compact {
    font-size: 0.68rem;
    margin-top: 0.1rem;
    margin-bottom: 0.15rem;
    color: var(--vd-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vd-stat-card--compact .vd-stat-delta {
    font-size: 0.62rem;
    margin-top: 0;
    white-space: nowrap;
}

.vd-home-kpi-chart-wrap {
    position: relative;
    height: 2rem;
    margin-top: auto;
    width: 100%;
}

.vd-home-kpi-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.vd-home-charts-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0.5rem;
}

@media (max-width: 1199.98px) {
    .vd-home-charts-grid {
        grid-template-columns: 1fr;
    }
}

.vd-home--dashboard .vd-home-chart-card {
    min-height: 8rem;
}

.vd-home--dashboard .vd-home-chart-body {
    min-height: 6rem;
}

.vd-home--dashboard .vd-home-chart-body--donut {
    min-height: 5.5rem;
}

.vd-home--dashboard .vd-home-quick-card {
    margin-bottom: 0 !important;
    border-radius: 0.75rem !important;
}

.vd-home--dashboard .vd-home-feed-card {
    border-radius: 0.75rem !important;
}

.vd-home--dashboard .vd-home-tickets-card {
    border-radius: 0.75rem !important;
}

.vd-home-charts-row {
    margin-top: 0.25rem;
}

.vd-home-chart-card {
    padding: 0.5rem 0.65rem 0.45rem;
    min-height: 9.5rem;
    display: flex;
    flex-direction: column;
}

.vd-home-chart-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--vd-text-muted);
    margin-bottom: 0.25rem;
}

.vd-home-chart-body {
    position: relative;
    flex: 1;
    min-height: 7.5rem;
}

.vd-home-chart-body--donut {
    min-height: 7rem;
}

.vd-home--compact .vd-home-main-row {
    margin-top: 0.25rem;
}

.vd-home--compact .vd-home-tickets-card .vd-card-head {
    padding: 0.55rem 0.75rem;
}

.vd-home--compact .vd-home-tickets-card .vd-card-head-title {
    font-size: 0.9rem;
}

.vd-home--compact .vd-ticket-list .vd-ticket-row {
    padding: 0.55rem 0.75rem;
}

.vd-home--compact .vd-ticket-avatar {
    width: 32px;
    height: 32px;
}

.vd-home--compact .vd-home-quick-card .vd-card-head,
.vd-home--compact .vd-home-feed-card .vd-card-head {
    padding: 0.5rem 0.75rem;
}

.vd-home--compact .vd-home-quick-card,
.vd-home--compact .vd-home-feed-card {
    margin-bottom: 0.5rem !important;
}

.vd-home--compact .vd-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.vd-home--compact .vd-quick-tile {
    min-height: 4.25rem;
    padding: 0.45rem 0.35rem;
    font-size: 0.68rem;
}

.vd-home--compact .vd-quick-tile-icon {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.95rem;
}

.vd-home--compact .vd-mini-feed-item {
    padding: 0.4rem 0.35rem;
}

.vd-home--compact .vd-mini-feed-list {
    max-height: 7.5rem;
    overflow-y: auto;
}

.vd-page-h2--compact {
    font-size: 1.1rem !important;
}