/* ==========================================================================
   Operator One – Huisstijl override voor de UnoPIM admin-UI
   Gegenereerd/onderhouden via packages/Webkul/OperatorTheme
   Merkkleuren: primair #0156a9, navy #0f1c2e — font: Montserrat
   ========================================================================== */

/* ---- Montserrat webfont (self-hosted) ---- */
@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-ExtraBold.otf") format("opentype");
    font-weight: 800; font-style: normal; font-display: swap;
}

/* ---- Typografie: Montserrat overal (verslaat inline style="font-family: inter") ---- */
:root { --o1-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html body,
body.font-inter,
.font-inter,
.font-poppins {
    font-family: var(--o1-font) !important;
}

/* ---- Logo swap in de header + sidebar-drawer (id="logo-image") ---- */
#logo-image {
    content: url("images/logo.png");
    height: 40px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}
html.dark #logo-image {
    content: url("images/logo-white.png");
}

/* ---- Dashboard-icoontjes: paarse SVG's vervangen door merkblauwe versies ----
   De iconen zijn <img> met de UnoPIM-SVG (paars ingebakken); via content:url()
   tonen we onze ingekleurde variant. De [src*="..."] matcht de gehashte
   build-bestandsnaam (bv. icon-products-5b431497.svg). */
img[src*="icon-products"]   { content: url("images/icon-products.svg"); }
img[src*="icon-categories"] { content: url("images/icon-categories.svg"); }
img[src*="icon-attribute"]  { content: url("images/icon-attribute.svg"); }
img[src*="icon-groups"]     { content: url("images/icon-groups.svg"); }
img[src*="icon-families"]   { content: url("images/icon-families.svg"); }
img[src*="icon-locale"]     { content: url("images/icon-locale.svg"); }
img[src*="icon-channel"]    { content: url("images/icon-channel.svg"); }

/* ---- Tekstselectie in merkblauw ---- */
::selection { background-color: rgba(1, 86, 169, 0.20); }

/* ---- Custom component-knoppen (definiëren eigen kleuren in app.css) ---- */
.primary-button {
    background-color: #0a5faa !important;
    border-color: #0156a9 !important;
    color: #f9fafb !important;
}
.primary-button:hover {
    background-color: #0156a9 !important;
    border-color: #0156a9 !important;
}
.secondary-button {
    border-color: #0a5faa !important;
    color: #0a5faa !important;
}
.secondary-button:hover {
    color: #0156a9 !important;
    border-color: #0156a9 !important;
    background-color: #d6e6f5 !important;
}
.transparent-button { color: #0a5faa !important; }
.transparent-button:hover { color: #0156a9 !important; background-color: #eef4fb !important; }
.dark .transparent-button:hover { background-color: #0a1420 !important; }

/* ---- Actieve icon-kleur (dark) ---- */
html.dark .active [class^="icon-"],
html.dark .active [class*=" icon-"] { color: #3a86cf !important; }

/* ---- Rich text (TinyMCE) + multiselect accenten ---- */
.tox .tox-toolbar__group:last-child button { color: #0156a9 !important; background-color: #d6e6f5 !important; }
.tox .tox-toolbar__group:last-child button:hover,
.tox .tox-tbtn:hover { background-color: #aecdec !important; }
.highlighted-tribute-item { background-color: #d6e6f5 !important; }
.dark .highlighted-tribute-item { background-color: #1a2c42 !important; }
.multiselect__option--highlight,
.multiselect__tag,
.multiselect__spinner:after { background-color: #d6e6f5 !important; color: #0a5faa !important; }
.dark .multiselect__option--highlight,
.dark .multiselect__tag { background-color: #1a2c42 !important; }

/* ---- Gradient-stops (overgeslagen door generator) ---- */
.from-violet-50 { --tw-gradient-from: #eef4fb var(--tw-gradient-from-position) !important; }
.dark .dark\:from-cherry-900 { --tw-gradient-from: #0a1420 var(--tw-gradient-from-position) !important; }
.dark .dark\:to-cherry-800 { --tw-gradient-to: #0f1c2e var(--tw-gradient-to-position) !important; }

/* ==========================================================================
   Utility-class remap (auto-gegenereerd uit gebruikte violet/cherry/sky-classes)
   ========================================================================== */
.bg-cherry-800 { background-color: #0f1c2e !important; }
.bg-cherry-900 { background-color: #0a1420 !important; }
.bg-sky-100 { background-color: #d6e6f5 !important; }
.bg-sky-500 { background-color: #0156a9 !important; }
.bg-violet-100 { background-color: #d6e6f5 !important; }
.bg-violet-200 { background-color: #aecdec !important; }
.bg-violet-300 { background-color: #7fb0e0 !important; }
.bg-violet-400 { background-color: #3a86cf !important; }
.bg-violet-50 { background-color: #eef4fb !important; }
.bg-violet-500 { background-color: #1a6cbb !important; }
.bg-violet-600 { background-color: #0a5faa !important; }
.bg-violet-700 { background-color: #0156a9 !important; }
.bg-violet-900\/20 { background-color: rgba(13, 61, 112, 0.2) !important; }
.border-violet-100 { border-color: #d6e6f5 !important; }
.border-violet-200 { border-color: #aecdec !important; }
.border-violet-300 { border-color: #7fb0e0 !important; }
.border-violet-50 { border-color: #eef4fb !important; }
.border-violet-500 { border-color: #1a6cbb !important; }
.border-violet-700 { border-color: #0156a9 !important; }
.dark .dark\:bg-cherry-700 { background-color: #16283d !important; }
.dark .dark\:bg-cherry-800 { background-color: #0f1c2e !important; }
.dark .dark\:bg-cherry-900 { background-color: #0a1420 !important; }
.dark .dark\:bg-sky-900\/30 { background-color: rgba(10, 47, 87, 0.3) !important; }
.dark .dark\:bg-violet-800 { background-color: #094b8f !important; }
.dark .dark\:bg-violet-900 { background-color: #0d3d70 !important; }
.dark .dark\:bg-violet-900\/20 { background-color: rgba(13, 61, 112, 0.2) !important; }
.dark .dark\:bg-violet-900\/30 { background-color: rgba(13, 61, 112, 0.3) !important; }
.dark .dark\:border-cherry-700 { border-color: #16283d !important; }
.dark .dark\:border-cherry-800 { border-color: #0f1c2e !important; }
.dark .dark\:border-cherry-900 { border-color: #0a1420 !important; }
.dark .dark\:border-violet-800 { border-color: #094b8f !important; }
.dark .dark\:divide-cherry-700 { border-color: #16283d !important; }
.dark .dark\:divide-cherry-800 { border-color: #0f1c2e !important; }
.group:hover .dark .dark\:group-hover\:text-violet-800 { color: #094b8f !important; }
.dark .dark\:hover\:bg-cherry-700:hover { background-color: #16283d !important; }
.dark .dark\:hover\:bg-cherry-800:hover { background-color: #0f1c2e !important; }
.dark .dark\:hover\:bg-cherry-800\/50:hover { background-color: rgba(15, 28, 46, 0.5) !important; }
.dark .dark\:hover\:bg-cherry-900:hover { background-color: #0a1420 !important; }
.dark .dark\:hover\:text-violet-300:hover { color: #7fb0e0 !important; }
.dark .dark\:hover\:text-violet-400:hover { color: #3a86cf !important; }
.peer:checked ~ .dark .dark\:peer-checked\:bg-violet-700 { background-color: #0156a9 !important; }
.dark .dark\:text-cherry-700 { color: #16283d !important; }
.dark .dark\:text-sky-400 { color: #3a86cf !important; }
.dark .dark\:text-sky-500 { color: #0156a9 !important; }
.dark .dark\:text-violet-200 { color: #aecdec !important; }
.dark .dark\:text-violet-300 { color: #7fb0e0 !important; }
.dark .dark\:text-violet-400 { color: #3a86cf !important; }
.dark .dark\:text-violet-400\/80 { color: rgba(58, 134, 207, 0.8) !important; }
.dark .dark\:text-violet-700 { color: #0156a9 !important; }
.dark .dark\:text-violet-800 { color: #094b8f !important; }
.focus\:bg-violet-500:focus { background-color: #1a6cbb !important; }
.focus\:bg-violet-700:focus { background-color: #0156a9 !important; }
.focus\:border-violet-500:focus { border-color: #1a6cbb !important; }
.focus\:ring-violet-300:focus { --tw-ring-color: #7fb0e0 !important; }
.focus\:ring-violet-500:focus { --tw-ring-color: #1a6cbb !important; }
.hover\:bg-violet-100:hover { background-color: #d6e6f5 !important; }
.hover\:bg-violet-50:hover { background-color: #eef4fb !important; }
.hover\:bg-violet-500:hover { background-color: #1a6cbb !important; }
.hover\:bg-violet-700:hover { background-color: #0156a9 !important; }
.hover\:border-violet-500:hover { border-color: #1a6cbb !important; }
.hover\:border-violet-700:hover { border-color: #0156a9 !important; }
.dark .hover\:dark\:bg-cherry-800:hover { background-color: #0f1c2e !important; }
.hover\:text-violet-700:hover { color: #0156a9 !important; }
.peer:checked ~ .peer-checked\:bg-violet-700 { background-color: #0156a9 !important; }
.peer:checked ~ .peer-checked\:text-violet-700 { color: #0156a9 !important; }
.ring-violet-200 { --tw-ring-color: #aecdec !important; }
.text-sky-600 { color: #0a5faa !important; }
.text-sky-700 { color: #094b8f !important; }
.text-violet-200 { color: #aecdec !important; }
.text-violet-500 { color: #1a6cbb !important; }
.text-violet-600 { color: #0a5faa !important; }
.text-violet-600\/80 { color: rgba(10, 95, 170, 0.8) !important; }
.text-violet-700 { color: #0156a9 !important; }
.text-violet-800 { color: #094b8f !important; }