/* Katalog-View Styles */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: #43affc;
    border-radius: 0.5rem;
    margin-bottom: 3rem;
    justify-content: center;
}

.filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    padding: 7px;
    background: #fff;
}

/* Center the switches vertically within the filter bar */
.filter-bar .form-check.form-switch { align-self: center; }

#ofen-cards {
    gap: 1rem;
}

.ofen-card {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e1e1e1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: pop-in 0.4s ease;
}

.ofen-card.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.ofen-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
}

.ofen-card .info {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ofen-card .info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.ofen-card .info p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

.category-container {
    display: flex;
    gap: 1rem;
    margin: 10px 0;
}

/* Customer (Mandanten) Form: Avatar über Karte, fixiert am Karten-Top */
.customer-card { position: relative; overflow: visible; }
.customer-avatar-abs { top: -25px; right: 100px; left: auto; transform: translateY(-50%); z-index: 2; }

.category { flex: 1; }

#pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

/* --- Sidebar layout & polish --- */
/* Make sidebar scroll with the page (no independent fixed scroll) */
/* Auskommentiert weil das Asidemenü sonst gar nicht sich richtig verhält */
.vertical-menu {
    /* position: static;  */
}
.vertical-menu .sidebar-menu-scroll {
    /* height: auto;
    overflow: visible;
    padding-bottom: .75rem; */
}

/* --- Sidebar polish --- */
.vertical-menu #sidebar-menu a { text-decoration: none; }
.vertical-menu .metismenu > li > a {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    font-weight: 600; color: var(--bs-gray-700);
    transform-origin: left center;
    padding: .55rem 1rem .55rem 1.25rem; /* base left indent */
    transition: transform .18s ease, color .2s ease, background-color .2s ease, padding-left .18s ease;
    will-change: transform, padding-left;
}
.vertical-menu .metismenu > li > a i { font-size: 18px; opacity: .9; }
.vertical-menu #sidebar-menu .has-arrow:after { transition: transform .2s ease; }
.vertical-menu .metismenu > li.mm-active > a,
.vertical-menu .metismenu > li > a:hover,
.vertical-menu .metismenu > li:hover > a { color: var(--bs-primary); transform: scale(1.03) translateX(4px); padding-left: 1.5rem; }

.vertical-menu .metismenu .sub-menu li > a {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem 1rem .35rem 2rem; /* base left indent for submenu */
    font-weight: 500;
    color: var(--bs-gray-700);
    transition: transform .18s ease, color .2s ease, padding-left .18s ease;
    will-change: transform, padding-left;
}
.vertical-menu .metismenu .sub-menu li > a:hover,
.vertical-menu .metismenu .sub-menu li:hover > a { color: var(--bs-primary); transform: translateX(6px); padding-left: 2.5rem; }

.vertical-menu .metismenu .menu-search { padding: .25rem 0 .35rem 0; }
.vertical-menu .metismenu .menu-search .form-control { font-size: .875rem; }
.vertical-menu .metismenu .sidebar-results { max-height: 220px; overflow-y: auto; }
.vertical-menu .metismenu .sidebar-results .list-group-item { border: 0; padding: .35rem 1rem; }
.vertical-menu .metismenu .sidebar-results .list-group-item i { font-size: 16px; opacity: .8; }
.vertical-menu .metismenu .sidebar-results .list-group-item img { width: 24px; height: 24px; object-fit: cover; }

/* Smooth submenu animation on hover */
.vertical-menu ul.sub-menu.submenu-animating { overflow: hidden; transition: height .24s ease; will-change: height; }

/* Sidebar edge toggle button */
.sidebar-pin-btn {
    position: absolute;
    right: -14px;
    top: 57px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
    z-index: 1103;
}
.sidebar-pin-btn:hover { background: #2aa673; }
.sidebar-pin-btn i { transition: transform .25s ease; font-size: 18px; }
#sidebar-pin-toggle.expanded i { transform: rotate(180deg); }

/* Collapsed sidebar (icon-only): auto width flyouts matching content */
body[data-sidebar-size='sm'] .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: auto !important;
    min-width: 230px;
}
body[data-sidebar-size='sm'] .vertical-menu #sidebar-menu > ul > li:hover > ul {
    width: auto !important;
    min-width: 210px;
}
body[data-sidebar-size='sm'] .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    width: auto !important;
    min-width: 210px;
    white-space: nowrap;
}
/* deeper nested flyouts */
body[data-sidebar-size='sm'] .vertical-menu #sidebar-menu ul li:hover > ul {
    width: auto !important;
    min-width: 210px;
}
body[data-sidebar-size='sm'] .vertical-menu #sidebar-menu ul li:hover > ul a {
    width: auto !important;
    min-width: 210px;
    white-space: nowrap;
}


#pagination button {
    padding: 0.5rem 0.75rem;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e0;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#pagination button:hover { background-color: #cbd5e0; }

#pagination button.active {
    background-color: #2b6cb0;
    color: #fff;
    border-color: #2b6cb0;
}

.modal-tech li,
.modal-features li {
    background: #f8f9fa;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.modal-tech li:hover,
.modal-features li:hover {
    background: #e9ecef;
    transform: scale(1.02);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
    margin: 3px;
    cursor: pointer;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item:hover {
    background: #dddddd;
    scale: 1.02;
}

/* Favorisierte TomSelect-Items deutlich markieren (Fallback, falls Bootstrap subtle-Farben nicht greifen) */
.ts-wrapper .item.fav-item {
    background-color: var(--bs-warning-bg-subtle, #fff3cd) !important;
    color: var(--bs-warning-text-emphasis, #664d03) !important;
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
    .filter-bar { flex-direction: column; }
    .filter-bar .filter-group { flex-wrap: wrap; }
    .category-container { flex-direction: column; }
}

/* Rainbow-Ring: dreht sich nahtlos um das Input (Pastell wie Button) */
@property --ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#artikel-url,
#impressum-url {
    position: relative;
    border: 2px solid transparent;
    border-radius: .25rem;
    background:
        linear-gradient(var(--bs-body-bg, #fff), var(--bs-body-bg, #fff)) padding-box,
        conic-gradient(from var(--ring-angle),
            #ffb3ba,
            #ffdfba,
            #ffffba,
            #baffc9,
            #bae1ff,
            #d4bfff,
            #ffb3f0,
            #ffb3ba
        ) border-box;
    background-clip: padding-box, border-box;
    animation: ring-spin 6s linear infinite;
}

#artikel-scan,
#impressum-scan {
    background-image: linear-gradient(
        90deg,
        #ffb3ba,
        #ffdfba,
        #ffffba,
        #baffc9,
        #bae1ff,
        #d4bfff,
        #ffb3f0
    );
    background-size: 200% 100%;
    border: none;
    color: #a200ff;
    animation: rainbow-bg 5s linear infinite;
}

#artikel-scan:hover,
#impressum-scan:hover {
    filter: brightness(0.9);
}

@keyframes ring-spin {
    to { --ring-angle: 360deg; }
}

@keyframes rainbow-bg {
    from { background-position: 0% 0%; }
    to   { background-position: 200% 0%; }
}

/* Hersteller-Logo Placeholder nur ausblenden, wenn Bild erfolgreich geladen */
#logo-wrapper.logo-loaded #logo-placeholder { display: none !important; }
#logo-wrapper.logo-loaded #logo-preview { display: block !important; }

/* Mobile Right-Slide Sidebar + FAB (override) */
@media (max-width: 991.98px) {
  .vertical-menu {
    right: 0; left: auto;
    width: calc(100% - 72px);
    max-width: 420px;
    transform: translateX(100%);
    transition: transform .28s ease;
  }
  body.sidebar-enable .vertical-menu { transform: translateX(0); z-index: 1061; }
  .fab-menu {
    position: fixed; right: 12px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%;
    background: #28a745; color:#fff; border:none; box-shadow:0 6px 18px rgba(0,0,0,.2);
    display:inline-flex; align-items:center; justify-content:center; z-index:1062;
    transition: transform .24s ease, left .24s ease, right .24s ease, background-color .2s ease;
  }
  .fab-menu:active { transform: scale(.96); }
  body.sidebar-enable .fab-menu { right:auto; left:8px; background:#198754; }
}
/* Mobile Sidebar Overlay & FAB */
@media (max-width: 991.98px) {
  .vertical-menu {
    position: fixed;
    top: 0; right: 0; left: auto; bottom: 0;
    z-index: 1060; /* über Content/Modals (Bootstrap Modal ist 1055), unter Right Sidebar (9999) */
    box-shadow: 0 0 24px rgba(0,0,0,.25);
    display: block;
    width: calc(100% - 72px); /* Platz für FAB-X */
    max-width: 420px;
    transform: translateX(100%);
    transition: transform .28s ease;
  }
  /* Wenn geöffnet: sichtbar einsliden */
  body.sidebar-enable .vertical-menu { transform: translateX(0); }
  /* Content darunter halten */
  .main-content { position: relative; z-index: 1; }
  /* Topbar sollte über Sidebar bleiben */
  #page-topbar { position: relative; z-index: 1061; }
  /* Optional: Backdrop bei offenem Menü */
  body.sidebar-enable:after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1059; /* knapp unter der Sidebar */
  }
  /* FAB unten rechts */
  .fab-menu { position: fixed; right:12px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#28a745; color:#fff; border:none; box-shadow:0 10px 28px rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center; z-index:1062; transition: right .28s ease, background-color .2s ease; will-change: right; }
  .fab-menu:active { transform: scale(.96); }
  body.sidebar-enable .fab-menu { right:auto; left:8px; background:#198754; }
  /* Topbar Hamburger auf Mobile ausblenden */
  .navbar-header .vertical-menu-btn { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) { .fab-menu { right: 20px; bottom: 20px; } }

/* Mobile: Sidebar-Pin-Button ausblenden */
@media (max-width: 991.98px) { .sidebar-pin-btn { display: none !important; } }

/* STELA Brand Helpers */
:root { --stela-green: #61B36B; }
.text-stela,
a.text-stela,
.text-stela:hover,
.text-stela:focus,
a.text-stela:hover,
a.text-stela:focus {
  color: var(--stela-green, #61B36B) !important;
}