/* =============================================================
   SHUVINO — Polish layer (loaded last; additive refinements)
   ============================================================= */

/* ---------- Global niceties ---------- */
html { scroll-behavior: smooth; }
::selection { background: color-mix(in srgb, var(--sh-blue) 22%, transparent); color: var(--sh-blue-700); }

/* Custom scrollbars */
* { scrollbar-width: thin; scrollbar-color: #C7D0E0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #CBD5E6; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #A9B6CE; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Accessible focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--sh-blue); outline-offset: 2px; border-radius: 4px;
}

/* =============================================================
   DASHBOARD POLISH
   ============================================================= */

/* Page-enter animation (staggered) */
@keyframes sh-dash-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sh-dash__body > * { animation: sh-dash-in .5s var(--sh-ease) both; }
.sh-dash__body > *:nth-child(1) { animation-delay: .02s; }
.sh-dash__body > *:nth-child(2) { animation-delay: .10s; }
.sh-dash__body > *:nth-child(3) { animation-delay: .18s; }
.sh-dash__body > *:nth-child(4) { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) { .sh-dash__body > * { animation: none; } }

/* ---- KPI cards ---- */
.sh-kpi { transition: transform .3s var(--sh-ease), box-shadow .3s var(--sh-ease), border-color .3s; }
.sh-kpi::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 45%, #fff));
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--sh-ease);
}
.sh-kpi:hover { transform: translateY(-5px); box-shadow: var(--sh-shadow); border-color: transparent; }
.sh-kpi:hover::before { transform: scaleX(1); }
.sh-kpi__ico {
    background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 18%, #fff), color-mix(in srgb, var(--acc) 8%, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent), 0 6px 14px color-mix(in srgb, var(--acc) 14%, transparent);
    transition: transform .3s var(--sh-ease);
}
.sh-kpi:hover .sh-kpi__ico { transform: scale(1.08) rotate(-4deg); }
.sh-kpi__val { color: var(--sh-ink); }

/* ---- Sidebar ---- */
.sh-navlink.is-active {
    background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 68%, #000));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--acc) 34%, transparent);
}
.sh-navlink { transition: background var(--sh-fast), color var(--sh-fast), transform var(--sh-fast); }
.sh-navlink:not(.is-active):hover { transform: translateX(3px); }
.sh-sidebar__logo { position: relative; }
.sh-sidebar__nav::-webkit-scrollbar { width: 6px; }

/* ---- Cards ---- */
.sh-dcard { transition: box-shadow .3s var(--sh-ease), transform .3s var(--sh-ease); }
.sh-dcard:hover { box-shadow: var(--sh-shadow-sm); }
.sh-dcard__head { background: linear-gradient(180deg, color-mix(in srgb, var(--sh-bg-soft) 55%, #fff), #fff); }
.sh-dcard__head h3 { letter-spacing: -.01em; }

/* ---- Tables ---- */
.sh-table thead th { background: var(--sh-bg-soft); }
.sh-table thead th:first-child { border-top-left-radius: 10px; }
.sh-table thead th:last-child { border-top-right-radius: 10px; }
.sh-table tbody tr { transition: background var(--sh-fast); }
.sh-table tbody tr:hover { background: var(--acc-50); }
.sh-tprod img, .sh-tuser img { transition: transform var(--sh-fast); }
.sh-table tbody tr:hover .sh-tprod img, .sh-table tbody tr:hover .sh-tuser img { transform: scale(1.06); }

/* ---- Topbar ---- */
.sh-dtop__ic { transition: all var(--sh-fast); }
.sh-dtop__ic:hover { transform: translateY(-2px); box-shadow: var(--sh-shadow-xs); }
.sh-dtop__profile { transition: background var(--sh-fast); }
.sh-dtop__profile:hover { background: var(--sh-bg-soft); }
.sh-dtop__search { transition: box-shadow var(--sh-fast), background var(--sh-fast); }
.sh-dtop__search:focus-within { background: #fff; box-shadow: 0 0 0 3px var(--acc-50), var(--sh-shadow-xs); }

/* ---- Bar chart baseline grid ---- */
.sh-bars { position: relative; }
.sh-bars::before {
    content: ""; position: absolute; inset: 10px 0 22px; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(to top, transparent 0, transparent 24%, var(--sh-line) 24%, var(--sh-line) calc(24% + 1px));
    opacity: .6;
}
.sh-bars__col { position: relative; z-index: 1; }
.sh-bars__bar { box-shadow: 0 4px 12px color-mix(in srgb, var(--acc) 22%, transparent); }

/* ---- Donut lift ---- */
.sh-donut { box-shadow: 0 12px 30px rgba(18,59,147,.12); transition: transform .4s var(--sh-ease); }
.sh-donut:hover { transform: scale(1.03); }

/* ---- Status pills: crisper ---- */
.sh-status { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }

/* =============================================================
   STOREFRONT POLISH
   ============================================================= */

/* Section eyebrow accent tick */
.sh-eyebrow { position: relative; }

/* Buttons: refined press + sheen */
.sh-btn { transition: transform var(--sh-fast) var(--sh-ease), box-shadow var(--sh-mid) var(--sh-ease), filter var(--sh-fast); }
.sh-btn:active { transform: translateY(1px) scale(.99); }
.sh-btn--primary:hover, .sh-btn--orange:hover, .sh-btn--teal:hover { filter: brightness(1.04); }

/* Category cards: gradient icon glow on hover */
.sh-cat__icon { transition: transform var(--sh-mid) var(--sh-ease), box-shadow var(--sh-mid); }
.sh-cat:hover .sh-cat__icon { transform: scale(1.12) rotate(-5deg); box-shadow: var(--sh-shadow-teal); }

/* Product/group cards: crisper media zoom */
.sh-card__media img { transition: transform .6s var(--sh-ease); }
.sh-card:hover .sh-card__media img { transform: scale(1.07); }

/* Vendor cards hover */
.sh-vendor { transition: transform var(--sh-mid) var(--sh-ease), box-shadow var(--sh-mid), border-color var(--sh-mid); }
.sh-vendor:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow); }

/* Footer link hover slide */
.sh-footer a { transition: color var(--sh-fast), padding-left var(--sh-fast); }

/* Nicer disabled/empty polish for pills already covered */