/* ==========================================================================
   Pioneer Vision Reports — Component Library & Motion
   Loaded after app.css. Extends the token system with reusable components and
   tasteful motion. Everything reads the same CSS variables, so white-label
   theming reflows components too.
   ========================================================================== */

/* ---- Motion primitives --------------------------------------------------- */
@keyframes pv-fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes pv-rise      { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes pv-scale-in  { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
@keyframes pv-shimmer   { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
@keyframes pv-spin      { to { transform: rotate(360deg) } }

.pv-animate-rise  { animation: pv-rise .35s cubic-bezier(.22,.61,.36,1) both; }
.pv-animate-fade  { animation: pv-fade-in .3s ease both; }
.pv-animate-scale { animation: pv-scale-in .2s ease both; }
/* Stagger children for list/grid entrances */
.pv-stagger > * { animation: pv-rise .4s cubic-bezier(.22,.61,.36,1) both; }
.pv-stagger > *:nth-child(1){animation-delay:.02s}.pv-stagger > *:nth-child(2){animation-delay:.06s}
.pv-stagger > *:nth-child(3){animation-delay:.10s}.pv-stagger > *:nth-child(4){animation-delay:.14s}
.pv-stagger > *:nth-child(5){animation-delay:.18s}.pv-stagger > *:nth-child(6){animation-delay:.22s}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important } }

/* ---- Glassmorphism (used on topbar, overlays, feature panels) ------------ */
.pv-glass {
    background: color-mix(in srgb, var(--pv-surface) 72%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid color-mix(in srgb, var(--pv-border) 70%, transparent);
}

/* ---- Large KPI / statistic card (hero metric) ---------------------------- */
.pv-kpi {
    position: relative; overflow: hidden;
    background: var(--pv-surface); border: 1px solid var(--pv-border);
    border-radius: var(--pv-r-lg); padding: 1.4rem 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pv-kpi:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow-lg); border-color: color-mix(in srgb, var(--pv-primary) 30%, var(--pv-border)); }
.pv-kpi::after { /* subtle brand wash in the corner */
    content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
    background: var(--pv-grad-brand); opacity:.10; filter: blur(8px); border-radius:50%;
}
.pv-kpi-label { font-size: var(--pv-text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color: var(--pv-text-muted); }
.pv-kpi-value { font-family: var(--pv-font-display); font-size: 2.4rem; font-weight:800; line-height:1.05; margin:.35rem 0; letter-spacing:-.02em; }
.pv-kpi-foot  { display:flex; align-items:center; gap:.5rem; font-size: var(--pv-text-sm); }

/* ---- Chart card (holds ApexCharts; body lazy-loads) ---------------------- */
.pv-chart-card { background: var(--pv-surface); border:1px solid var(--pv-border); border-radius: var(--pv-r-lg); box-shadow: var(--pv-shadow-sm); }
.pv-chart-body { padding: .5rem 1rem 1rem; min-height: 240px; }

/* ---- Skeleton loader ----------------------------------------------------- */
.pv-skeleton {
    background: linear-gradient(90deg, var(--pv-surface-2) 25%, color-mix(in srgb, var(--pv-slate-300) 40%, var(--pv-surface-2)) 37%, var(--pv-surface-2) 63%);
    background-size: 800px 100%; animation: pv-shimmer 1.3s linear infinite; border-radius: var(--pv-r-sm);
}
.pv-skel-line { height: 12px; margin:.5rem 0; }
.pv-skel-title{ height: 20px; width:40%; }
.pv-skel-card { height: 96px; border-radius: var(--pv-r-lg); }

/* ---- Spinner ------------------------------------------------------------- */
.pv-spinner { width:18px; height:18px; border:2px solid color-mix(in srgb, var(--pv-primary) 30%, transparent); border-top-color: var(--pv-primary); border-radius:50%; animation: pv-spin .7s linear infinite; display:inline-block; }

/* ---- Modal --------------------------------------------------------------- */
.pv-modal-backdrop { position:fixed; inset:0; z-index:80; background: rgba(10,15,29,.5); backdrop-filter: blur(3px); display:grid; place-items:center; padding:1.5rem; animation: pv-fade-in .18s ease; }
.pv-modal { width:100%; max-width:520px; background: var(--pv-surface); border:1px solid var(--pv-border); border-radius: var(--pv-r-xl); box-shadow: var(--pv-shadow-lg); animation: pv-scale-in .18s ease; }
.pv-modal-head { display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.35rem; border-bottom:1px solid var(--pv-border); }
.pv-modal-body { padding:1.35rem; }
.pv-modal-foot { display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.35rem; border-top:1px solid var(--pv-border); }

/* ---- Dropdown ------------------------------------------------------------ */
.pv-dropdown { position:relative; }
.pv-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:200px; background: var(--pv-surface); border:1px solid var(--pv-border); border-radius: var(--pv-r-md); box-shadow: var(--pv-shadow-lg); padding:.35rem; z-index:50; animation: pv-scale-in .12s ease; transform-origin: top right; }
.pv-menu-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius: var(--pv-r-sm); font-size: var(--pv-text-sm); color: var(--pv-text); cursor:pointer; }
.pv-menu-item:hover { background: var(--pv-surface-2); }
.pv-menu-sep { height:1px; background: var(--pv-border); margin:.35rem 0; }

/* ---- Tabs ---------------------------------------------------------------- */
.pv-tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--pv-border); }
.pv-tab { padding:.65rem .9rem; font-size: var(--pv-text-sm); font-weight:600; color: var(--pv-text-muted); border-bottom:2px solid transparent; cursor:pointer; transition: color .15s ease, border-color .15s ease; }
.pv-tab:hover { color: var(--pv-text); }
.pv-tab.active { color: var(--pv-primary); border-bottom-color: var(--pv-primary); }

/* ---- Timeline ------------------------------------------------------------ */
.pv-timeline { position:relative; padding-left: 1.6rem; }
.pv-timeline::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background: var(--pv-border); }
.pv-tl-item { position:relative; padding:0 0 1.15rem; }
.pv-tl-dot { position:absolute; left:-1.6rem; top:2px; width:16px; height:16px; border-radius:50%; background: var(--pv-surface); border:2px solid var(--pv-primary); display:grid; place-items:center; }
.pv-tl-dot.is-success{border-color:var(--pv-success)} .pv-tl-dot.is-warning{border-color:var(--pv-warning)} .pv-tl-dot.is-danger{border-color:var(--pv-danger)}
.pv-tl-time { font-size: var(--pv-text-xs); color: var(--pv-text-muted); }

/* ---- Avatar -------------------------------------------------------------- */
.pv-avatar-sm { width:28px; height:28px; font-size:.72rem; border-radius: var(--pv-r-full); background: var(--pv-grad-brand); color:#fff; display:grid; place-items:center; font-weight:700; }
.pv-avatar-lg { width:52px; height:52px; font-size:1.1rem; border-radius: var(--pv-r-full); background: var(--pv-grad-brand); color:#fff; display:grid; place-items:center; font-weight:700; }

/* ---- Progress bar -------------------------------------------------------- */
.pv-progress { height:8px; border-radius: var(--pv-r-full); background: var(--pv-surface-2); overflow:hidden; }
.pv-progress > span { display:block; height:100%; border-radius: var(--pv-r-full); background: var(--pv-grad-brand); transition: width .5s cubic-bezier(.22,.61,.36,1); }

/* ---- Alert / Toast ------------------------------------------------------- */
.pv-alert { display:flex; gap:.7rem; padding:.85rem 1rem; border-radius: var(--pv-r-md); border:1px solid; font-size: var(--pv-text-sm); }
.pv-alert-info    { background: var(--pv-info-soft);    border-color: color-mix(in srgb, var(--pv-info) 30%, transparent);    color:#075985; }
.pv-alert-success { background: var(--pv-success-soft); border-color: color-mix(in srgb, var(--pv-success) 30%, transparent); color:#166534; }
.pv-alert-warning { background: var(--pv-warning-soft); border-color: color-mix(in srgb, var(--pv-warning) 30%, transparent); color:#92400e; }
.pv-alert-danger  { background: var(--pv-danger-soft);  border-color: color-mix(in srgb, var(--pv-danger) 30%, transparent);  color:#991b1b; }
.pv-toast-wrap { position:fixed; top:1rem; right:1rem; z-index:90; display:flex; flex-direction:column; gap:.6rem; }
.pv-toast { min-width:280px; background: var(--pv-surface); border:1px solid var(--pv-border); border-left-width:3px; border-radius: var(--pv-r-md); box-shadow: var(--pv-shadow-lg); padding:.8rem 1rem; animation: pv-rise .25s ease both; }

/* ---- Empty state --------------------------------------------------------- */
.pv-empty { text-align:center; padding:3rem 1.5rem; }
.pv-empty-icon { width:60px; height:60px; margin:0 auto 1rem; border-radius: var(--pv-r-lg); background: var(--pv-primary-soft); color: var(--pv-primary); display:grid; place-items:center; font-size:1.5rem; }

/* ---- Pagination ---------------------------------------------------------- */
.pv-pagination { display:flex; gap:.3rem; align-items:center; }
.pv-page-btn { min-width:34px; height:34px; padding:0 .5rem; display:grid; place-items:center; border-radius: var(--pv-r-md); border:1px solid var(--pv-border); background: var(--pv-surface); color: var(--pv-text); font-size: var(--pv-text-sm); cursor:pointer; }
.pv-page-btn:hover { background: var(--pv-surface-2); }
.pv-page-btn.active { background: var(--pv-primary); color:#fff; border-color: var(--pv-primary); }
.pv-page-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- Breadcrumbs --------------------------------------------------------- */
.pv-breadcrumbs { display:flex; align-items:center; gap:.4rem; font-size: var(--pv-text-sm); color: var(--pv-text-muted); }
.pv-breadcrumbs a { color: var(--pv-text-muted); } .pv-breadcrumbs a:hover { color: var(--pv-primary); }
.pv-breadcrumbs .sep { opacity:.5; }

/* ---- Toggle switch ------------------------------------------------------- */
.pv-switch { position:relative; width:42px; height:24px; display:inline-block; }
.pv-switch input { opacity:0; width:0; height:0; }
.pv-switch .track { position:absolute; inset:0; background: var(--pv-slate-300); border-radius: var(--pv-r-full); transition:.2s; }
.pv-switch .track::before { content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow: var(--pv-shadow-sm); }
.pv-switch input:checked + .track { background: var(--pv-primary); }
.pv-switch input:checked + .track::before { transform: translateX(18px); }

/* ---- Data table niceties + row hover ------------------------------------- */
.pv-table tbody tr { transition: background-color .12s ease; }
.pv-table-actions { display:flex; gap:.35rem; opacity:.55; transition: opacity .15s ease; }
.pv-table tbody tr:hover .pv-table-actions { opacity:1; }

[x-cloak] { display:none !important; }