/* =============================================================================
   polish.css - VerifAIer Enterprise Dashboard UI - Phase 5 (UX polish)
   Loaded AFTER components.css. Additive visual refinement + chart utilities.
   Self-contained, no CDN. Honors prefers-reduced-motion via the global rule.
   ============================================================================= */

/* -- Typography ------------------------------------------------------------- */
body { letter-spacing: -0.005em; }
.vd-page-header__title { letter-spacing: -0.032em; }
.vd-card__title, .vd-section-header__title, .vd-modal__title { letter-spacing: -0.01em; }
.vd-metric__value, .vd-kpi__value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vd-help, .vd-card__subtitle { line-height: 1.5; }

/* -- Scrollbars ------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
::-webkit-scrollbar-track { background: transparent; }

/* -- Cards & elevation ------------------------------------------------------ */
.vd-card { box-shadow: 0 1px 2px rgba(0,0,0,0.28); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.vd-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.34); }
.vd-modal__dialog { border-radius: var(--r-xl); }
.vd-toast { border-radius: var(--r-lg); }

/* -- Metric widgets --------------------------------------------------------- */
.vd-metric { position: relative; overflow: hidden; transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); }
.vd-metric::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--color-green), transparent 70%); opacity: 0.55; }
.vd-metric:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.36); border-color: var(--border-green); }
.vd-metric__icon { box-shadow: inset 0 0 0 1px var(--border-green); }
.vd-metric__value { font-size: 2rem; }

/* -- Meters -> chart-like gradient ------------------------------------------ */
.vd-meter { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.vd-meter__fill { background: linear-gradient(90deg, var(--color-green-dim), var(--color-green)); box-shadow: 0 0 8px rgba(0,229,160,0.35); transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.vd-meter__fill--muted { background: linear-gradient(90deg, #2a3342, #3d4757); box-shadow: none; }
.vd-meter__fill--yellow { background: linear-gradient(90deg, #c67e12, var(--color-yellow)); box-shadow: 0 0 8px rgba(245,166,35,0.3); }
.vd-meter__fill--red { background: linear-gradient(90deg, #b3271f, var(--color-red)); box-shadow: 0 0 8px rgba(229,62,62,0.3); }
.vd-meter__fill--blue { background: linear-gradient(90deg, #3a7fd0, var(--color-blue)); }

/* -- Badges: subtle tint for a premium chip look ---------------------------- */
.vd-badge { background: rgba(255,255,255,0.02); }
.vd-badge--green, .vd-badge--trust-trusted, .vd-badge--risk-low, .vd-badge--quality-excellent, .vd-badge--compliance-complete, .vd-badge--compliance-satisfied { background: rgba(0,229,160,0.08); }
.vd-badge--blue, .vd-badge--trust-acceptable, .vd-badge--quality-good { background: rgba(96,165,250,0.08); }
.vd-badge--yellow, .vd-badge--trust-caution, .vd-badge--risk-medium, .vd-badge--quality-fair, .vd-badge--compliance-partial { background: rgba(245,166,35,0.08); }
.vd-badge--red, .vd-badge--trust-untrusted, .vd-badge--risk-high, .vd-badge--risk-critical, .vd-badge--quality-poor, .vd-badge--compliance-incomplete, .vd-badge--compliance-not_satisfied { background: rgba(229,62,62,0.08); }
.vd-badge--green.vd-badge--solid { background: var(--color-green); }
.vd-badge--yellow.vd-badge--solid { background: var(--color-yellow); }
.vd-badge--red.vd-badge--solid { background: var(--color-red); }
.vd-badge--blue.vd-badge--solid { background: var(--color-blue); }

/* -- Buttons & microinteractions -------------------------------------------- */
.vd-btn { transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast); }
.vd-btn--primary { box-shadow: 0 2px 12px rgba(0,229,160,0.16); }
.vd-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,229,160,0.26); }
.vd-btn:active { transform: translateY(0) scale(0.98); }
.vd-iconbtn:active, .vd-chip:active, .vd-page:active { transform: scale(0.96); }
.vd-chip { transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }

/* -- Sidebar ---------------------------------------------------------------- */
.vd-navlink__icon { transition: transform var(--t-fast), color var(--t-fast); }
.vd-navlink:hover .vd-navlink__icon { transform: translateX(1px); }
.vd-navlink[aria-current="page"] .vd-navlink__icon { color: var(--color-green); }
.vd-sidebar__brand .vd-sidebar__wordmark em { transition: text-shadow var(--t-base); }
.vd-sidebar__brand:hover .vd-sidebar__wordmark em { text-shadow: 0 0 12px rgba(0,229,160,0.5); }

/* -- Topbar & search -------------------------------------------------------- */
.vd-topbar { box-shadow: 0 1px 0 rgba(255,255,255,0.02); }
.vd-search:focus-within, .vd-searchbar:focus-within { box-shadow: 0 0 0 3px rgba(0,229,160,0.12); }

/* -- Tables ----------------------------------------------------------------- */
.vd-table tbody tr { transition: background var(--t-fast); }
.vd-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.vd-table a.vd-mono { transition: color var(--t-fast); }

/* -- States ----------------------------------------------------------------- */
.vd-state__icon { transition: transform var(--t-base); }
.vd-state:hover .vd-state__icon { transform: scale(1.04); }
.vd-skel { will-change: background-position; }

/* -- Entrance animation (disabled under reduced-motion via global rule) ----- */
@keyframes vd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vd-main > .vd-page-header, .vd-main > .vd-toolbar, .vd-main > .vd-section-header,
.vd-main > .vd-card, .vd-grid > * , .vd-tabpanel > .vd-card { animation: vd-rise 0.45s ease both; }
.vd-grid > *:nth-child(2) { animation-delay: 0.04s; }
.vd-grid > *:nth-child(3) { animation-delay: 0.08s; }
.vd-grid > *:nth-child(4) { animation-delay: 0.12s; }
.vd-grid > *:nth-child(5) { animation-delay: 0.16s; }
.vd-grid > *:nth-child(6) { animation-delay: 0.20s; }

/* -- Chart utilities: mini bars --------------------------------------------- */
.vd-bars { display: flex; flex-direction: column; gap: var(--s-3); }
.vd-bar { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: var(--s-3); font-size: var(--text-xs); }
.vd-bar__label { color: var(--text-secondary); white-space: nowrap; }
.vd-bar__track { height: 8px; background: var(--bg-overlay); border-radius: var(--r-full); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.vd-bar__fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--color-green-dim), var(--color-green)); transition: width 0.8s cubic-bezier(0.22,1,0.36,1); }
.vd-bar__fill--blue { background: linear-gradient(90deg, #3a7fd0, var(--color-blue)); }
.vd-bar__fill--yellow { background: linear-gradient(90deg, #c67e12, var(--color-yellow)); }
.vd-bar__fill--red { background: linear-gradient(90deg, #b3271f, var(--color-red)); }
.vd-bar__val { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }

/* -- Chart utilities: donut ring (set --pct 0..100, --ring-color) ----------- */
.vd-ring { --pct: 0; --ring-color: var(--color-green); width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--bg-overlay) 0); }
.vd-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--border-default); }
.vd-ring__label { position: relative; font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* -- Responsive refinements ------------------------------------------------- */
@media (max-width: 900px) { .vd-sidebar { box-shadow: 10px 0 44px rgba(0,0,0,0.5); } }
@media (max-width: 700px) {
  .vd-metric__value { font-size: 1.75rem; }
  .vd-bar { grid-template-columns: 78px 1fr 30px; }
  .vd-table { min-width: 560px; }
}