/* Вынесено из site.css (Important C, фаза A / PLAN_css_refactor_v2.md): glass, chips, бейджи, scrollbar, dropdown. */
/* ============================================================
   VibeDesk utilities: glass surfaces, glow, gradients, chips
   ============================================================ */
.vd-glass {
    background: var(--vd-panel);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--vd-border-soft);
    border-radius: var(--vd-radius-md);
    color: var(--vd-text);
}

.vd-glass-card {
    background: linear-gradient(135deg, var(--vd-glass-card-from) 0%, var(--vd-glass-card-to) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--vd-border);
    border-radius: var(--vd-radius-lg);
    box-shadow: var(--vd-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--vd-text);
}

.vd-glass-card .card-header,
.vd-glass-card .card-footer {
    background: transparent !important;
    border-color: var(--vd-border-soft) !important;
    color: var(--vd-text);
}

.vd-glow-purple {
    box-shadow: var(--vd-accent-glow);
}

.vd-glow-border {
    border: 1px solid var(--vd-border-strong);
    box-shadow: 0 0 15px var(--vd-accent-soft-2), inset 0 0 15px var(--vd-accent-soft);
}

.vd-text-gradient {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.vd-hero-user {
    color: #ffd1e8;
    text-shadow:
        0 1px 0 rgba(15, 23, 42, 0.35),
        0 0 10px rgba(255, 105, 180, 0.35),
        0 0 22px rgba(255, 105, 180, 0.22);
}

.vd-accent-gradient-bg {
    background: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-strong) 100%);
    color: #fff !important;
    border: none !important;
}

.vd-accent-gradient-bg:hover,
.vd-accent-gradient-bg:focus {
    filter: brightness(1.08);
    color: #fff !important;
    box-shadow: var(--vd-accent-glow);
}

/* Статусы тикетов */
.vd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

/* Унифицированные бейджи статуса тикета (таблицы, карточки, детали) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.status-badge--open {
    background: var(--vd-chip-red-bg);
    color: var(--vd-chip-red-text);
    border-color: var(--vd-chip-red-border);
}

.status-badge--progress {
    background: var(--vd-chrome-flat);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.status-badge--resolved {
    background: var(--vd-chip-emerald-bg);
    color: var(--vd-chip-emerald-text);
    border-color: var(--vd-chip-emerald-border);
}

.status-badge--muted {
    background: var(--vd-chip-gray-bg);
    color: var(--vd-chip-gray-text);
    border-color: var(--vd-chip-gray-border);
}

.vd-chip-status-open,
.vd-chip-blue {
    background: var(--vd-chip-blue-bg);
    color: var(--vd-chip-blue-text);
    border-color: var(--vd-chip-blue-border);
}

.vd-chip-status-progress,
.vd-chip-violet {
    background: var(--vd-chip-violet-bg);
    color: var(--vd-chip-violet-text);
    border-color: var(--vd-chip-violet-border);
}

.vd-chip-status-resolved,
.vd-chip-emerald {
    background: var(--vd-chip-emerald-bg);
    color: var(--vd-chip-emerald-text);
    border-color: var(--vd-chip-emerald-border);
}

.vd-chip-status-closed,
.vd-chip-gray {
    background: var(--vd-chip-gray-bg);
    color: var(--vd-chip-gray-text);
    border-color: var(--vd-chip-gray-border);
}

.vd-chip-priority-low {
    background: var(--vd-chip-gray-bg);
    color: var(--vd-chip-gray-text);
    border-color: var(--vd-chip-gray-border);
}

.vd-chip-priority-medium,
.vd-chip-yellow {
    background: var(--vd-chip-yellow-bg);
    color: var(--vd-chip-yellow-text);
    border-color: var(--vd-chip-yellow-border);
}

.vd-chip-priority-high,
.vd-chip-orange {
    background: var(--vd-chip-orange-bg);
    color: var(--vd-chip-orange-text);
    border-color: var(--vd-chip-orange-border);
}

.vd-chip-priority-urgent,
.vd-chip-red {
    background: var(--vd-chip-red-bg);
    color: var(--vd-chip-red-text);
    border-color: var(--vd-chip-red-border);
    animation: vd-chip-pulse 1.8s ease-in-out infinite;
}

@keyframes vd-chip-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.78; }
}

/* Custom scrollbar — ненавязчивый, адаптируется под палитру */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--vd-border-strong);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--vd-accent);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Tooltip / dropdown-menu readability (плотный фон — без просвечивания UI под меню) */
body.zen-body .dropdown-menu:not(.bg-white):not(.dropdown-menu-light):not(.vd-mini-profile-menu) {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--vd-border-strong, var(--vd-border));
    color: var(--vd-text);
    box-shadow: var(--vd-shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.zen-body .dropdown-menu:not(.bg-white):not(.dropdown-menu-light):not(.vd-mini-profile-menu) .dropdown-item {
    color: var(--vd-text);
}
body.zen-body .dropdown-menu:not(.bg-white):not(.dropdown-menu-light):not(.vd-mini-profile-menu) .dropdown-item:hover,
body.zen-body .dropdown-menu:not(.bg-white):not(.dropdown-menu-light):not(.vd-mini-profile-menu) .dropdown-item:focus {
    background: var(--vd-accent-soft);
    color: var(--vd-text-strong);
}