/* Click Vitrine identity, layered on Nova's native components and semantic colors. */
:root{--cv-brand-coral:#ffa58d;--cv-brand-ink:#17264b}
.cv-panel-logo{display:block;width:auto;max-width:100%;color:var(--cv-brand-ink)}
.cv-panel-logo.h-6{height:32px;width:165px;min-width:165px}
.cv-panel-logo.h-8{height:48px;width:248px;margin-inline:auto}
.dark .cv-panel-logo{color:#f4f6ff}
/* Light primary tones preserve readable links, controls and Nova's dark button text. */
html.dark{--colors-primary-400:184,197,255;--colors-primary-500:154,173,255;--colors-primary-600:135,156,248}
.dark .cv-assistant-steps button[aria-current]{color:rgb(var(--colors-gray-900))}
/* A secondary brand detail; error, warning and success tokens remain semantic. */
.cv-theme-card.is-selected{box-shadow:inset 0 -3px 0 var(--cv-brand-coral)}
.cv-assistant-note{border-left-color:var(--cv-brand-coral)}

/* Raw selects in custom tools use the same surface as Nova SelectControl. */
.cv-native-select{appearance:auto}
@media(max-width:639px){.cv-panel-logo.h-6{width:140px;min-width:140px;height:28px}}

/* Click Vitrine workspace: visual layer over Nova 5, without replacing its controls. */
:root {
    --cv-panel-canvas: #f5f7fb;
    --cv-panel-surface: #fff;
    --cv-panel-border: #e4e9f2;
    --cv-panel-ink: #17264b;
    --cv-panel-muted: #60708b;
    --cv-panel-radius: 12px;
    --cv-panel-shadow: 0 2px 8px rgb(23 38 75 / 4%);
    --cv-panel-header-height: 56px;
}
html.dark {
    --cv-panel-canvas: #111827;
    --cv-panel-surface: #1e293b;
    --cv-panel-border: #334155;
    --cv-panel-ink: #f1f5f9;
    --cv-panel-muted: #a9b7cd;
}
body:has(#nova), #nova { background-color: var(--cv-panel-canvas); }
#nova { color: var(--cv-panel-ink); }
/* Stick the existing header wrapper: sticking its child would be constrained
   by the wrapper's own 56px height. Leave Nova's drawers and dialogs above it. */
#nova > div:has(> header) { position: sticky; top: 0; z-index: 30; }
html:has(#nova) { scroll-padding-top: calc(var(--cv-panel-header-height) + 16px); }
#nova > div > header {
    background: var(--cv-panel-surface);
    border-bottom: 1px solid var(--cv-panel-border);
    box-shadow: 0 1px 4px rgb(23 38 75 / 3%);
}
#nova h1 { letter-spacing: -.035em; font-weight: 700; }
#nova :is(.form-input, .form-control-bordered) { border-radius: 8px; }
html.dark #nova .help-text { color: var(--cv-panel-muted); }
html.dark #nova .help-text-error { color: #fca5a5; }
html.dark #nova .form-input::placeholder { color: var(--cv-panel-muted); opacity: 1; }
#nova :is(button, a).bg-primary-500 { border-radius: 8px; }
#nova :is(button, a).bg-primary-500:focus-visible { outline: 2px solid rgb(var(--colors-primary-500)); outline-offset: 3px; }
#nova :is(.bg-white, .dark\:bg-gray-800).rounded-lg {
    border-radius: var(--cv-panel-radius);
    box-shadow: var(--cv-panel-shadow);
}
#nova table thead { background: var(--cv-panel-canvas); }
#nova table th { letter-spacing: .025em; font-size: 11px; color: var(--cv-panel-muted); }
#nova table td { border-color: var(--cv-panel-border); }
#nova table tbody tr:hover { background-color: rgba(var(--colors-primary-500), .035); }
#nova .nova-dashboard { border-radius: var(--cv-panel-radius); }
#nova .nova-dashboard .grid-stack-item-content { border-radius: var(--cv-panel-radius); border: 1px solid var(--cv-panel-border); box-shadow: var(--cv-panel-shadow); }
#nova .cv-assistant-note { background: rgba(var(--colors-primary-500), .045); border-radius: 0 8px 8px 0; }
#nova .cv-assistant-steps button { border-radius: 8px; }
#nova .cv-theme-card { border-radius: var(--cv-panel-radius); }
/* Tool introductions are cards, not the application navigation bar. */
#nova .cv-theme-intro {
    background: var(--cv-panel-surface);
    border: 1px solid var(--cv-panel-border);
    border-radius: var(--cv-panel-radius);
    box-shadow: var(--cv-panel-shadow);
    padding: 24px;
    flex-wrap: wrap;
}
#nova .cv-theme-intro > div { min-width: 0; flex: 1 1 320px; }
#nova .cv-theme-intro h1 { margin-bottom: 8px; line-height: 1.25; }
#nova .cv-theme-intro p { margin: 0; max-width: 70ch; color: var(--cv-panel-muted); }
#nova .cv-theme-intro > a { flex-shrink: 0; padding-block: 6px; }
@media (max-width: 640px) {
    #nova .cv-theme-intro { padding: 20px; }
    #nova .cv-theme-intro > div { flex-basis: auto; }
}


/* Keep the installed section navigation; labels make each business area discoverable. */
#collapsible-resource-manager-desktop > div > div:first-child {
    background: #17264b;
    border-right-color: #17264b;
    padding: 12px 8px;
}
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child > div > button {
    width: 88px;
    height: auto;
    min-height: 66px;
    padding: 10px 5px;
    border-radius: 10px;
    color: #d9e3fc;
    flex-direction: column;
    gap: 6px;
}
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child > div > button::after {
    content: attr(aria-label);
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    max-width: 78px;
}
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child > div > button:hover { background: #263a66; color: #fff; }
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child > div > button[aria-expanded="true"] {
    background: #fff;
    color: #2349eb;
    box-shadow: inset 3px 0 0 #ffa58d;
}
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child > div > button:focus-visible { outline: 2px solid #ffa58d; outline-offset: 2px; }
/* Both navigation columns share the brand navy in light and dark mode. */
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) > div > div {
    background: var(--cv-brand-ink);
    color: #d9e3fc;
    border-color: #304268;
}
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) > div > div:nth-child(2) {
    scrollbar-width: thin;
    scrollbar-color: #52648d var(--cv-brand-ink);
}
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) :is(a, h3, button) { color: #d9e3fc; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) h3 { color: #bac9e8; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) .border-b { border-color: #304268; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) div.text-primary-500 { color: #d9e3fc; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) :is(a, h3, button):hover { color: #fff; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a:hover { background: #263a66; }
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) :is(a, h3, button):focus-visible { outline: 2px solid var(--cv-brand-coral); outline-offset: 2px; }
#collapsible-resource-manager-responsive > div > div:first-child button:hover { background: #263a66; }
#collapsible-resource-manager-responsive > div > div:first-child button[aria-expanded="true"] { background: #fff; color: #2349eb; }

:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a {
    border-radius: 8px;
    min-height: 40px;
    font-size: 13px;
}
:is(#collapsible-resource-manager-desktop, #collapsible-resource-manager-responsive) a.text-primary-500 {
    background: #2e4470;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--cv-brand-coral);
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    #nova :is(button, a, .cv-theme-card) { transition-duration: .01ms; }
}
#collapsible-resource-manager-desktop > div > div:first-child {
    height: calc(100dvh - var(--cv-panel-header-height));
    max-height: calc(100dvh - var(--cv-panel-header-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #52648d #17264b;
    position: sticky;
    top: var(--cv-panel-header-height);
    align-self: flex-start;
}
#collapsible-resource-manager-desktop > div > div:nth-child(2) {
    position: sticky;
    top: var(--cv-panel-header-height);
    height: calc(100dvh - var(--cv-panel-header-height));
    min-height: calc(100dvh - var(--cv-panel-header-height));
    max-height: calc(100dvh - var(--cv-panel-header-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    align-self: flex-start;
}
#collapsible-resource-manager-desktop > div > div:first-child { width: 104px; min-width: 104px; flex-shrink: 0; }
#collapsible-resource-manager-desktop > div > div:first-child > div:first-child { width: 88px; flex-shrink: 0; }
@media (max-width: 767px) {
    #nova .nova-dashboard .grid-stack-item-content { overflow: auto; }
    #nova .nova-dashboard table { min-width: 640px; }
    #nova .nova-dashboard table :is(th, td) { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
}

/* These existing Tool classes are not emitted by Nova's precompiled utility CSS. */
#nova form.flex.items-end { align-items: flex-end; gap: .75rem; }
#nova form.flex.items-end > button { flex-shrink: 0; }
#nova section > ul > li.flex.gap-4 { align-items: flex-start; gap: 1rem; }
#nova section > ul > li.flex.gap-4 > button { flex-shrink: 0; }
/* Chart.js paints labels inside the canvas. A light plotting surface preserves
   their native contrast and series colors without changing chart options or JS. */
html.dark #nova .nova-dashboard canvas { background-color: #f8fafc; border-radius: 6px; }
@media (max-width: 479px) {
    #nova form.flex.items-end { flex-direction: column; align-items: stretch; }
    #nova form.flex.items-end > button { align-self: flex-start; }
}
/* Functional store-link field; identity stays within the Nova panel. */
#nova .cv-store-link { min-width: 0; word-break: normal; }
#nova .cv-store-link input[readonly] { color: var(--cv-panel-ink); }
#nova .cv-store-link > p { margin-top: 0.5rem; overflow-wrap: anywhere; }
#nova .cv-store-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.75rem; }
#nova .cv-store-link-print-name { display: none; }
/* Native Image field: keep its form preview readable rather than one tiny grid column. */
#nova div:has(> div > label[for="file-stores-store_qr_code"]) .grid { grid-template-columns: minmax(0, 256px); }
#nova [dusk="store_qr_code"] img { width: 256px; max-width: 100%; height: auto; }
@media print {
    #nova:has(.cv-store-link) { position: relative; height: 250mm; overflow: hidden; background: #fff; }
    #nova:has(.cv-store-link) * { visibility: hidden; position: static; transform: none; }
    #nova .cv-store-link, #nova .cv-store-link *,
    #nova [dusk="store_qr_code"], #nova [dusk="store_qr_code"] *,
    #nova div:has(> div > label[for="file-stores-store_qr_code"]),
    #nova div:has(> div > label[for="file-stores-store_qr_code"]) * { visibility: visible; color: #000; background: #fff; }
    #nova .cv-store-link { position: absolute; top: 0; left: 0; width: 100%; }
    #nova .cv-store-link-print-name { display: block; font-size: 20pt; }
    #nova .cv-store-link-actions, #nova .cv-store-link [role="status"] { display: none; }
    #nova .cv-store-link input { border: 0; padding: 0; width: 100%; }
    #nova [dusk="store_qr_code"],
    #nova div:has(> div > label[for="file-stores-store_qr_code"]) { display: block; position: absolute; top: 65mm; left: 0; width: 90mm; }
    #nova [dusk="store_qr_code"] > div,
    #nova div:has(> div > label[for="file-stores-store_qr_code"]) > div { width: 100%; padding: 0; }
    #nova div:has(> div > label[for="file-stores-store_qr_code"]) .grid { grid-template-columns: minmax(0, 70mm); }
    #nova [dusk="store_qr_code"] img { width: 70mm; height: auto; }
}
/* The counter terminal must also fit the native header on portrait tablets. */
#nova:has(.cv-pos-terminal) > div > header > .flex-1 { min-width: 0; }