/* Veylora core: tokens + shell + components (to be split into layout/components/pages in later batches) */
:root{--vy-primary:#4f46e5;--vy-primary-rgb:79,70,229;--vy-primary-hover:#4338ca;--vy-sidebar-w:264px;--vy-sidebar-w-compact:72px;--vy-topbar-h:64px;
--vy-surface:#fff;--vy-bg:#f6f7fb;--vy-border:#e5e7ef;--vy-muted:#5f6577;--vy-radius:12px;--vy-shadow:0 1px 2px rgba(16,24,40,.05);--vy-font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--vy-ease:.18s ease;
--bs-primary:var(--vy-primary);--bs-primary-rgb:var(--vy-primary-rgb);--bs-link-color:var(--vy-primary);--bs-link-hover-color:var(--vy-primary-hover);--bs-body-font-family:var(--vy-font)}
[data-bs-theme=dark]{--vy-surface:#171b2a;--vy-bg:#0f1220;--vy-border:#2a3045;--vy-muted:#a3a9bd;--vy-primary:#8b85ff;--vy-primary-rgb:139,133,255;--vy-primary-hover:#a29dff;--bs-body-bg:#0f1220;--bs-body-color:#e6e8f0}
body{background:var(--vy-bg)}
:root{--vy-btn:#4f46e5;--vy-btn-hover:#4338ca;--vy-btn-active:#3730a3}
.btn-primary{--bs-btn-bg:var(--vy-btn);--bs-btn-border-color:var(--vy-btn);--bs-btn-hover-bg:var(--vy-btn-hover);--bs-btn-hover-border-color:var(--vy-btn-hover);--bs-btn-active-bg:var(--vy-btn-active);--bs-btn-active-border-color:var(--vy-btn-active);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff}
:focus-visible{outline:3px solid var(--vy-primary);outline-offset:2px}
.skip-link{position:absolute;inset-inline-start:8px;top:-60px;z-index:2000;background:var(--vy-btn);color:#fff;padding:.5rem 1rem;border-radius:8px}.skip-link:focus{top:8px}
.text-muted-vy{color:var(--vy-muted)}
.vy-sidebar{--bs-offcanvas-width:var(--vy-sidebar-w);background:var(--vy-surface);border-inline-end:1px solid var(--vy-border)}
.vy-sidebar .offcanvas-body{padding:.5rem .75rem 1rem}
.vy-brand{height:var(--vy-topbar-h);display:flex;align-items:center;padding:0 .8rem;text-decoration:none;flex-shrink:0}
.vy-brand .vy-logo-mark{display:none}
.vy-group{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vy-muted);margin:1.1rem .75rem .35rem;font-weight:600}
.vy-nav,.vy-sub{list-style:none;margin:0;padding:0}
.vy-link{display:flex;align-items:center;gap:.75rem;width:100%;padding:.55rem .75rem;border:0;background:none;border-radius:8px;color:var(--bs-body-color);text-decoration:none;font-size:.9rem;transition:background var(--vy-ease)}
.vy-link:hover{background:rgba(var(--vy-primary-rgb),.08)}
.vy-link.active{background:rgba(var(--vy-primary-rgb),.10);color:var(--vy-primary);font-weight:600}
.vy-link.is-soon{opacity:.6;cursor:not-allowed}
.vy-link .bi{font-size:1.05rem}.vy-caret{margin-inline-start:auto;transition:transform var(--vy-ease)}
.vy-link[aria-expanded=true] .vy-caret{transform:rotate(180deg)}
.vy-sub{padding-inline-start:2.35rem;margin:.15rem 0}.vy-sub .vy-link{padding:.4rem .6rem;font-size:.85rem}
.vy-soon{font-size:.62rem;margin-inline-start:auto;border:1px solid var(--vy-border);border-radius:99px;padding:0 .4rem;color:var(--vy-muted)}
.vy-main{min-height:100vh;display:flex;flex-direction:column}
.vy-topbar{position:sticky;top:0;z-index:1020;height:var(--vy-topbar-h);display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;background:var(--vy-surface);border-bottom:1px solid var(--vy-border)}
.vy-search{position:relative;flex:1;max-width:420px}
.vy-search-results{position:absolute;top:calc(100% + 6px);inset-inline:0;background:var(--vy-surface);border:1px solid var(--vy-border);border-radius:var(--vy-radius);box-shadow:0 8px 24px rgba(16,24,40,.12);z-index:1030;max-height:320px;overflow:auto}
.vy-search-results a{display:block;padding:.5rem .85rem;color:var(--bs-body-color);text-decoration:none;font-size:.9rem}.vy-search-results a:hover,.vy-search-results a:focus{background:rgba(var(--vy-primary-rgb),.1)}
.vy-content{padding:1.5rem 1.25rem 2rem;flex:1}
.vy-card{background:var(--vy-surface);border:1px solid var(--vy-border);border-radius:var(--vy-radius);box-shadow:var(--vy-shadow);height:100%}
.vy-card .card-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .25rem;gap:.5rem}
.vy-card .card-head h2{font-size:1rem;margin:0;font-weight:600}.vy-card .card-body-vy{padding:1rem 1.25rem 1.25rem}
.vy-kpi{padding:1.1rem 1.25rem}.vy-kpi .label{color:var(--vy-muted);font-size:.8rem}.vy-kpi .value{font-size:1.55rem;font-weight:700;line-height:1.3}
.vy-delta{font-size:.78rem;font-weight:600}.vy-delta.up{color:#0f7b4f}.vy-delta.down{color:#b42318}
[data-bs-theme=dark] .vy-delta.up{color:#4ade80}[data-bs-theme=dark] .vy-delta.down{color:#f87171}
.vy-chart{position:relative;height:300px}.vy-chart-sm{height:260px}
.vy-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--vy-muted);font-weight:600;white-space:nowrap}
.vy-table{--bs-table-bg:transparent;margin:0}
.vy-demo-tag{font-size:.72rem;background:rgba(var(--vy-primary-rgb),.06);border:1px solid rgba(var(--vy-primary-rgb),.35);color:var(--vy-primary);border-radius:99px;padding:.15rem .6rem;font-weight:600}
.vy-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;padding:.15rem .6rem;border-radius:99px;background:rgba(var(--s),.14);color:rgb(var(--s))}
.vy-status::before{content:"";width:6px;height:6px;border-radius:50%;background:rgb(var(--s))}
.s-delivered{--s:10,102,64}.s-shipped{--s:3,105,161}.s-processing{--s:79,70,229}.s-pending{--s:133,77,0}.s-cancelled{--s:180,35,24}
[data-bs-theme=dark] .s-delivered{--s:74,222,128}[data-bs-theme=dark] .s-shipped{--s:56,189,248}[data-bs-theme=dark] .s-processing{--s:165,160,255}[data-bs-theme=dark] .s-pending{--s:250,204,21}[data-bs-theme=dark] .s-cancelled{--s:248,113,113}
.vy-empty{text-align:center;padding:2rem 1rem;color:var(--vy-muted)}
@media(min-width:992px){
.vy-sidebar.offcanvas{visibility:visible!important;transform:none!important;position:fixed;width:var(--vy-sidebar-w);transition:width var(--vy-ease)}
.vy-main{margin-inline-start:var(--vy-sidebar-w);transition:margin var(--vy-ease)}
.vy-collapsed .vy-sidebar.offcanvas{width:var(--vy-sidebar-w-compact)}.vy-collapsed .vy-main{margin-inline-start:var(--vy-sidebar-w-compact)}
.vy-collapsed .vy-label,.vy-collapsed .vy-caret,.vy-collapsed .vy-group,.vy-collapsed .vy-soon,.vy-collapsed .vy-brand .vy-logo-full{display:none}
.vy-collapsed .vy-brand .vy-logo-mark{display:block}.vy-collapsed .vy-link{justify-content:center}.vy-collapsed .vy-sub{display:none!important}
.vy-content{padding:1.75rem 2rem 2.5rem}.vy-topbar{padding:0 2rem}}
@media(max-width:991.98px){.vy-search{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.vy-sidebar,.vy-topbar,.no-print{display:none!important}.vy-main{margin:0!important}}
/* ---- Batch 2: data components ---- */
.vy-w-search{flex:1 1 220px;max-width:340px}
.vy-thumb{--h:230;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:hsl(var(--h) 55% 28%);background:hsl(var(--h) 80% 90%);flex-shrink:0}
[data-bs-theme=dark] .vy-thumb{color:hsl(var(--h) 80% 86%);background:hsl(var(--h) 35% 24%)}
.vy-thumb-lg{width:100%;height:auto;aspect-ratio:4/3;font-size:3rem;border-radius:var(--vy-radius)}.vy-thumb-sm{width:64px;height:64px;font-size:1rem}
.s-returned{--s:109,40,217}.s-muted{--s:71,85,105}
[data-bs-theme=dark] .s-returned{--s:196,181,253}[data-bs-theme=dark] .s-muted{--s:148,163,184}
.vy-th-sort{border:0;background:none;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;display:inline-flex;gap:.35rem;align-items:center}.vy-th-sort:hover{color:var(--vy-primary)}
.vy-bulkbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.6rem 1rem;border:1px solid var(--vy-border);border-radius:var(--vy-radius);background:rgba(var(--vy-primary-rgb),.08)}.vy-bulkbar[hidden]{display:none}
.vy-timeline{list-style:none;margin:0;padding-block:0;padding-inline:1rem 0;border-inline-start:2px solid var(--vy-border)}
.vy-timeline li{position:relative;padding-block:0 1rem;padding-inline:1rem 0}.vy-timeline li::before{content:"";position:absolute;inset-inline-start:-1.4rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--vy-primary)}
.vy-prev{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--vy-border)}
.vy-avatar{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:rgba(var(--vy-primary-rgb),.10);color:var(--vy-primary);flex-shrink:0}
.vy-table td .btn-group{white-space:nowrap}.vy-card .progress{height:8px}
.nav-pills{--bs-nav-pills-link-active-bg:var(--vy-btn)}
@media print{.vy-content{padding:0}.vy-card{box-shadow:none;break-inside:avoid}}
/* Overflow fixes: contain absolutely-positioned .visually-hidden cells; let grid stacks shrink below table min-width */
.table-responsive{position:relative}
.vy-content .d-grid{grid-template-columns:minmax(0,1fr)}

/* ---- Batch 4: appearance presets, density, radius, chart fallback ---- */
html[data-accent=teal]{--vy-primary:#0f766e;--vy-primary-rgb:15,118,110;--vy-primary-hover:#115e59;--vy-btn:#0f766e;--vy-btn-hover:#115e59;--vy-btn-active:#134e4a}
html[data-accent=teal][data-bs-theme=dark]{--vy-primary:#2dd4bf;--vy-primary-rgb:45,212,191;--vy-primary-hover:#5eead4}
html[data-accent=rose]{--vy-primary:#be123c;--vy-primary-rgb:190,18,60;--vy-primary-hover:#9f1239;--vy-btn:#be123c;--vy-btn-hover:#9f1239;--vy-btn-active:#881337}
html[data-accent=rose][data-bs-theme=dark]{--vy-primary:#fb7185;--vy-primary-rgb:251,113,133;--vy-primary-hover:#fda4af}
html[data-accent=blue]{--vy-primary:#1d4ed8;--vy-primary-rgb:29,78,216;--vy-primary-hover:#1e40af;--vy-btn:#1d4ed8;--vy-btn-hover:#1e40af;--vy-btn-active:#1e3a8a}
html[data-accent=blue][data-bs-theme=dark]{--vy-primary:#60a5fa;--vy-primary-rgb:96,165,250;--vy-primary-hover:#93c5fd}
html[data-accent=violet]{--vy-primary:#6d28d9;--vy-primary-rgb:109,40,217;--vy-primary-hover:#5b21b6;--vy-btn:#6d28d9;--vy-btn-hover:#5b21b6;--vy-btn-active:#4c1d95}
html[data-accent=violet][data-bs-theme=dark]{--vy-primary:#a78bfa;--vy-primary-rgb:167,139,250;--vy-primary-hover:#c4b5fd}
html[data-radius=sm]{--vy-radius:6px}html[data-radius=lg]{--vy-radius:18px}
html[data-density=compact] .vy-table>:not(caption)>*>*{padding:.3rem .6rem}
.vy-chart.vy-fallback-on{height:auto}.vy-fb-scroll{max-height:260px;overflow:auto}.vy-fb-bar{min-width:90px}.vy-fb-fill{display:block;height:8px;border-radius:4px;background:var(--vy-primary)}
.vy-swatch{width:34px;height:34px;border-radius:50%;border:3px solid transparent;padding:0}.vy-swatch[aria-pressed=true]{border-color:var(--bs-body-color)}
.vy-perm th,.vy-perm td{text-align:center}.vy-perm th:first-child,.vy-perm td:first-child{text-align:start}
@media print{.d-print-only{display:block!important}}
/* ---- Batch 5: standalone auth / error pages ---- */
.vy-auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:var(--vy-bg)}
.vy-auth-card{width:100%;max-width:440px;padding:2rem}.vy-auth-card.wide{max-width:560px;text-align:center}
.vy-auth-brand{display:flex;justify-content:center;margin-bottom:1.5rem}.vy-auth-top{position:fixed;top:1rem;inset-inline-end:1rem}
.vy-errcode{font-size:5rem;font-weight:800;line-height:1;color:var(--vy-primary)}

/* ---- Batch 5b: skeleton, docs layout ---- */
.vy-skeleton{display:block;height:1rem;border-radius:6px;background:linear-gradient(90deg,var(--vy-border) 25%,rgba(var(--vy-primary-rgb),.12) 37%,var(--vy-border) 63%);background-size:400% 100%;animation:vy-shimmer 1.4s ease infinite}
@keyframes vy-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.vy-docs{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.vy-docs-nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;padding:1.25rem;border-inline-end:1px solid var(--vy-border);background:var(--vy-surface)}
.vy-docs-body{padding:2rem clamp(1rem,4vw,3rem);max-width:980px}.vy-docs-body section{scroll-margin-top:1rem;margin-bottom:2.5rem}.vy-docs-body h2{font-size:1.4rem;margin-top:0}.vy-docs-body pre{background:var(--vy-surface);border:1px solid var(--vy-border);border-radius:var(--vy-radius);padding:1rem;overflow:auto;direction:ltr;text-align:left}
.vy-docs-nav a{display:block;padding:.3rem .5rem;border-radius:6px;text-decoration:none;color:var(--bs-body-color);font-size:.9rem}.vy-docs-nav a:hover,.vy-docs-nav a.active{background:rgba(var(--vy-primary-rgb),.12);color:var(--vy-primary)}
@media(max-width:991.98px){.vy-docs{grid-template-columns:minmax(0,1fr)}.vy-docs-nav{position:static;height:auto;border-inline-end:0;border-bottom:1px solid var(--vy-border)}}

/* ---- Batch 5b: accessibility fixes (contrast, focus, skip targets) ---- */
:root{--bs-heading-color:inherit;--bs-link-color-rgb:var(--vy-primary-rgb);--bs-link-hover-color-rgb:var(--vy-primary-rgb)}
.breadcrumb{--bs-breadcrumb-item-active-color:var(--vy-muted);--bs-breadcrumb-divider-color:var(--vy-muted)}
.btn:focus-visible,.btn-check:focus-visible+.btn{outline:3px solid var(--vy-primary);outline-offset:2px}
.btn-outline-secondary{--bs-btn-color:var(--bs-body-color);--bs-btn-border-color:var(--vy-muted);--bs-btn-hover-color:var(--bs-body-color);--bs-btn-hover-bg:rgba(var(--vy-primary-rgb),.12);--bs-btn-hover-border-color:var(--vy-muted);--bs-btn-active-color:var(--bs-body-color);--bs-btn-active-bg:rgba(var(--vy-primary-rgb),.2);--bs-btn-active-border-color:var(--vy-muted);--bs-btn-disabled-color:var(--vy-muted);--bs-btn-disabled-border-color:var(--vy-border)}
.btn-outline-primary{--bs-btn-color:var(--vy-primary);--bs-btn-border-color:var(--vy-primary);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--vy-btn);--bs-btn-hover-border-color:var(--vy-btn);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--vy-btn-active);--bs-btn-active-border-color:var(--vy-btn-active)}
.page-item.active .page-link{background-color:var(--vy-btn);border-color:var(--vy-btn);color:#fff}
.bg-primary,.text-bg-primary{background-color:var(--vy-btn)!important}
.vy-avatar-sm{width:36px;height:36px;font-size:.85rem}
main[tabindex="-1"]:focus{outline:0}

/* contrast: independent of the Bootstrap build in use (explicit colours, tokens for success/danger/code/help text) */
:root{--vy-success:#0f7b4f;--vy-on-success:#fff;--bs-code-color:#a3194f}
[data-bs-theme=dark]{--vy-success:#4ade80;--vy-on-success:#052e16;--bs-code-color:#f78fb3}
.btn-outline-secondary,.btn-outline-primary{color:var(--bs-btn-color)}
.btn-outline-success{--bs-btn-color:var(--vy-success);--bs-btn-border-color:var(--vy-success);--bs-btn-hover-color:var(--vy-on-success);--bs-btn-hover-bg:var(--vy-success);--bs-btn-hover-border-color:var(--vy-success);--bs-btn-active-color:var(--vy-on-success);--bs-btn-active-bg:var(--vy-success);color:var(--bs-btn-color)}
.valid-feedback{color:var(--vy-success)}.form-text{color:var(--vy-muted)}
[data-bs-theme=dark] .vy-avatar{color:var(--vy-primary-hover)}

:root{--vy-danger:#b42318;--vy-on-danger:#fff;--bs-warning-rgb:255,193,7}
[data-bs-theme=dark]{--vy-danger:#f87171;--vy-on-danger:#450a0a}
.btn-outline-danger{--bs-btn-color:var(--vy-danger);--bs-btn-border-color:var(--vy-danger);--bs-btn-hover-color:var(--vy-on-danger);--bs-btn-hover-bg:var(--vy-danger);--bs-btn-hover-border-color:var(--vy-danger);--bs-btn-active-color:var(--vy-on-danger);--bs-btn-active-bg:var(--vy-danger);--bs-btn-active-border-color:var(--vy-danger);color:var(--bs-btn-color)}
.text-danger{color:var(--vy-danger)!important}.invalid-feedback{color:var(--vy-danger)}
.progress-bar{background-color:var(--vy-btn);color:#fff}.progress-bar.bg-warning{color:#212529}.progress-bar.bg-success{background-color:#0f7b4f!important;color:#fff}.progress-bar.bg-danger{background-color:#b42318!important;color:#fff}
/* long unbroken text (emails, tracking codes) must wrap inside cards, including flex rows */
.card-body-vy{overflow-wrap:anywhere}.card-body-vy .d-flex>*{min-width:0}

/* ---- final QA: small-screen reflow ---- */
.vy-kpi{min-width:0}.vy-kpi .value{overflow-wrap:anywhere}.form-select,.form-control{max-width:100%}.pagination{flex-wrap:wrap}.vy-topbar{gap:.5rem}
@media(max-width:400px){.vy-kpi{padding:.85rem .9rem}.vy-kpi .value{font-size:1.2rem!important}.vy-content{padding-inline:1rem}.vy-topbar{padding:0 .75rem}}
/* ---- forced-colors (Windows High Contrast): keep boundaries, bars, indicators and focus visible without relying on background colour ---- */
@media (forced-colors:active){
 .vy-card,.progress,.vy-thumb,.vy-avatar,.vy-status,.vy-swatch{border:1px solid CanvasText}
 .btn.p-0.border-0{border:1px solid ButtonText!important}
 .progress-bar,.vy-fb-fill{background:Highlight!important;forced-color-adjust:none}
 .vy-status::before,.vy-timeline li::before{background:CanvasText;forced-color-adjust:none}
 .vy-swatch span{forced-color-adjust:none}
 .form-check-input{border:1px solid ButtonText}.form-check-input:checked{background-color:Highlight;border-color:Highlight;forced-color-adjust:none}
 .form-range::-webkit-slider-runnable-track{background-color:ButtonText}.form-range::-webkit-slider-thumb{background-color:Highlight;forced-color-adjust:none}
 .vy-link.active{outline:2px solid Highlight;outline-offset:-2px}
 :focus-visible,.btn:focus-visible{outline:3px solid Highlight}
}
/* ---- final QA: visual review fixes ---- */
.vy-status{white-space:nowrap}
.vy-kpi .value{overflow-wrap:break-word;font-size:clamp(1.1rem,.9vw + .85rem,1.5rem)!important}
@media (forced-colors:active){.nav-pills .nav-link{border:1px solid transparent}.nav-pills .nav-link.active,.nav-pills .nav-link[aria-pressed=true]{border-color:Highlight;outline:2px solid Highlight;outline-offset:-3px;font-weight:700}}


/* Static sizing for the component-library examples. */
.vy-progress-demo-65{width:65%}
.vy-progress-demo-20{width:20%}
.vy-thumb-demo-purple{--h:150}
.vy-thumb-demo-cyan{--h:20}