/* =============================================================================
   KERNEL CSS - Gemeinsame Styles für alle Mandanten
   =============================================================================
   Diese Datei enthält alle gemeinsamen Styles.
   Mandanten-spezifische Overrides (Farben, Fonts) kommen in die jeweilige
   mandant.css Datei, die NACH dieser Datei geladen wird.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Variables (können von Mandanten überschrieben werden)
   ----------------------------------------------------------------------------- */
:root {
    --color-primary: #83bc41;
    --color-primary-dark: #6fa033;
    --color-info: #7acaef;
    --color-secondary: #1498d6;
    --color-success: #93c024;
    --color-warning: #f0ad4e;
    --color-danger: #ea516d;
    --color-internal: #b300ff;
    --color-border: #ddd;
    --color-border-light: #eee;
    --color-text-muted: #c5c5c5;
    --font-family: 'Franz Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------------------------
   Global Reset & Base
   ----------------------------------------------------------------------------- */
html, body {
    overscroll-behavior: none;
}

/* -----------------------------------------------------------------------------
   Loader Animation – Slim Progress Bar (top of page, under navbar)
   ----------------------------------------------------------------------------- */
.loader {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 1100;
    overflow: hidden;
}

.loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--color-primary, #83bc41);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary, #83bc41) 40%, transparent),
                0 0 2px color-mix(in srgb, var(--color-primary, #83bc41) 30%, transparent);
    animation: loaderGrow 2s cubic-bezier(.4,0,.2,1) infinite;
}

.loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: loaderShimmer 2s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes loaderGrow {
    0%   { left: 0;    width: 0; }
    25%  { left: 0;    width: 55%; }
    50%  { left: 30%;  width: 50%; }
    75%  { left: 70%;  width: 30%; }
    100% { left: 100%; width: 0; }
}

@keyframes loaderShimmer {
    0%   { left: -30%; }
    100% { left: 130%; }
}

/* Inline .loader (inside modals, tabs, panels) – small spinner */
.modal .loader,
.tab-pane .loader,
.panel-body .loader {
    position: static;
    height: 32px;
    width: 32px;
    margin: 30px auto;
    border: 3px solid #e8e8e8;
    border-top-color: var(--color-primary, #83bc41);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: block;
    animation: loaderSpin .6s linear infinite;
}

.modal .loader::before,
.modal .loader::after,
.tab-pane .loader::before,
.tab-pane .loader::after,
.panel-body .loader::before,
.panel-body .loader::after {
    display: none;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------------------------
   Dropdown Hover (Desktop)
   ----------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   Panel, Progress, Table
   ----------------------------------------------------------------------------- */
.panel-group, .progress, .table {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   Status Buttons (Auftragsfarben)
   ----------------------------------------------------------------------------- */
.statusbutton0 { background: #dbdbdb !important; }
.statusbutton1 { background: #fff7aa !important; }
.statusbutton2, .statusbutton2a { background: #d2ffa8 !important; }
.statusbutton3, .statusbutton3a, .statusbutton3l, .statusbutton3l210 { background: #cae5ff !important; }
.dark { background: #666; }

/* -----------------------------------------------------------------------------
   UPS Leiste
   ----------------------------------------------------------------------------- */
.ups_leiste {
    background: #ebebe6;
}
.ups_leiste .btn-primary {
    background: #361c14;
    color: #ffb600;
    border-color: #ffb600;
    font-weight: bold;
    border: 0;
}
.ups_leiste a:hover { text-decoration: none; }
.ups_leiste .btn-primary:hover { background: #1b0f0c; }
.ups_leiste button { background: #361c14; color: #ffb600; }
.ups_leiste input, .ups_leiste select { border: 0; }

/* -----------------------------------------------------------------------------
   Jumbotron
   ----------------------------------------------------------------------------- */
.jumbotron {
    background: var(--color-primary);
    color: #fff;
}
.jumbotron small { color: #fff; }

/* -----------------------------------------------------------------------------
   Panels
   ----------------------------------------------------------------------------- */
.panel-primary > .panel-heading { background: #1084b9; }
.panel-internal > .panel-heading, .page-header .internal, .btn-internal {
    background: var(--color-internal);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Navigation (Responsive)
   ----------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1010px) {
    .nav > li > a {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* -----------------------------------------------------------------------------
   Floating/Absolute Header
   ----------------------------------------------------------------------------- */
.floatingHeader {
    position: fixed;
    top: 225px;
    visibility: hidden;
    z-index: 8;
    border: 1px solid #428bca;
    border-radius: 0;
    box-shadow: 0 5px 10px #888;
}

.absoluteHeader {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    border: 1px solid #428bca;
    border-bottom: 1px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

table .header-fixed {
    position: fixed;
    top: 125px;
    z-index: 1020;
    border-bottom: 1px solid #d5d5d5;
    border-radius: 0;
    box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
}

table #login.header-fixed { top: 50px; }

/* -----------------------------------------------------------------------------
   Anchor Offset
   ----------------------------------------------------------------------------- */
a[name] {
    padding-top: 240px;
    margin-top: -240px;
    display: inline-block;
}
a:hover { text-decoration: none; }

/* -----------------------------------------------------------------------------
   Header Container (Admin)
   ----------------------------------------------------------------------------- */
#headerContainer {
    position: sticky;
    top: 100px;
    background: #fff;
    z-index: 3;
    padding: 20px 15px 10px 15px;
    border-bottom: 2px solid var(--color-border-light);
    box-shadow: 1px 5px 10px #aaa;
}

/* -----------------------------------------------------------------------------
   Header Leiste (Login/Portal)
   ----------------------------------------------------------------------------- */
#headerLeiste {
    position: sticky;
    top: 50px;
    background: #fff;
    z-index: 3;
    padding: 10px 15px;
    border-bottom: 2px solid var(--color-border-light);
    box-shadow: 1px 5px 10px #aaa;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-bottom: 20px;
}
#headerLeiste h1 { font-size: 1.5em; margin: 0; }
#headerLeiste .btn { padding: 6px 10px; }

/* -----------------------------------------------------------------------------
   Navbar
   ----------------------------------------------------------------------------- */
.navbar a { cursor: pointer; }
.navbar-fixed-bottom, .navbar-fixed-top { z-index: 4; }
.navbar-toggle { display: none; }
.navbar-collapse.collapse { display: block !important; }
.navbar-nav > li { float: left; }
.navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
.navbar-nav { margin: 0; float: left; }
.navbar-right { float: right !important; margin-right: -15px; }
.navbar-nav > li > .dropdown-menu { right: 0; left: auto; }

/* -----------------------------------------------------------------------------
   Content Container
   ----------------------------------------------------------------------------- */
#contentContainer {
    margin-top: 52px;
    margin-bottom: 160px;
}
h3 { margin-top: 0; }

/* -----------------------------------------------------------------------------
   Fixed Elements
   ----------------------------------------------------------------------------- */
.fixed, .fixed60 {
    position: fixed;
    z-index: 3;
    width: 100%;
    padding: 5px 15px 0 15px;
}
.fixed { top: 100px; }
.fixed60 { top: 55px; }

/* -----------------------------------------------------------------------------
   Switch Toggle
   ----------------------------------------------------------------------------- */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
}
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.2s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.2s;
}
.slider.round { border-radius: 14px; }
.slider.round:before { border-radius: 50%; }

input:checked + .slider { background-color: var(--color-success); }
input:checked + .slider:before { transform: translateX(10px); }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

/* -----------------------------------------------------------------------------
   Avatar Dropzone
   ----------------------------------------------------------------------------- */
#avatarDropzone {
    padding: 0;
    height: 150px;
    width: 150px;
    margin-left: 50%;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid grey;
}
#photo { height: 100%; width: 100%; transform: translate(0, -13px); }
#avatarFile { display: none; }

/* Dropzone (compat.js) */
.dz-clickable { cursor: pointer; }
.dz-drag-hover { border: 2px dashed var(--color-primary) !important; background: rgba(147,192,36,0.1) !important; }

/* Alert-Buttons umbrechen auf schmalen Screens */
@media (max-width: 480px) {
    .wkContainer, .uploadButtonContainer { width: 100% !important; float: none !important; }
    .fehlertext .alert { display: flex; flex-direction: column; gap: 10px; }
    .fehlertext .alert .btn { white-space: normal; }
}

/* -----------------------------------------------------------------------------
   Form Controls
   ----------------------------------------------------------------------------- */
select.form-control { padding: 6px 4px; }

/* -----------------------------------------------------------------------------
   User Thumbnails
   ----------------------------------------------------------------------------- */
.userThumbnail { width: 24px; height: 24px; border-radius: 12px; }
.userThumbnail:hover { transform: scale(2.5); }
.userThumbnailBig { width: 80%; border-radius: 50%; }

/* -----------------------------------------------------------------------------
   Small Screen Adjustments
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .panel-title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .panel-title:hover { overflow: visible; }
    .nav > li > a { padding: 0 5px; }
}

/* -----------------------------------------------------------------------------
   Button Info
   ----------------------------------------------------------------------------- */
.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
}

/* -----------------------------------------------------------------------------
   Status Colors (Im Druck)
   ----------------------------------------------------------------------------- */
.bg-imdruck { background: #c8e4db; }
.label-imdruck { background: #1bb383; }
.btn-imdruck { background: #1bb383; border-color: #1bb383; color: #fff; }

/* -----------------------------------------------------------------------------
   Badge Positioning
   ----------------------------------------------------------------------------- */
#chatAmount .badge, #mailAmount .badge {
    position: absolute;
    height: 18px;
    top: 35px;
    left: 25px;
    background: var(--color-danger);
    float: left;
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   Mail Styling
   ----------------------------------------------------------------------------- */
.alert-custom { padding: 3px; margin: 0 0 4px 0; }
.alert-done { background: #f0ffe5 !important; }
.alert-trash { background: #ffdee2 !important; }

.attOpen {
    height: 300px;
    margin: 15px 0 0 0;
    padding: 6px 0 6px 6px;
    overflow-y: auto;
    background-color: #f0ffe5;
}

.mailBodyReduced { height: calc(100vh - 500px); }
.mailBodyMax { height: calc(100vh - 200px); }

.read { font-weight: 300; }
.unread { font-weight: 700; }

#selectionContainer { margin-top: 0; overflow-y: auto; }
.mailContainer { margin: 0; border-radius: 0; border-bottom: 1px solid #fff; }
#selectionPanel .btn { padding: 3px; }
#rightSide .nav > li > a { padding: 4px 8px; }
#rightContainer { border-left: 1px solid var(--color-border); }

#customerNameContainer {
    position: absolute;
    top: -26px;
    width: calc(100% - 15px);
    border-top-left-radius: 4px;
    right: 0;
    padding: 4px 15px 2px 4px;
    background: var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #bbb;
}

@media screen and (max-width: 768px) {
    #selectionContainer { height: 30vh; }
    #rightContainer { padding: 10px; }
}

@media screen and (min-width: 768px) {
    #selectionContainer, #rightContainer, #rightSide { height: calc(100vh - 90px); }
}

/* -----------------------------------------------------------------------------
   Suchergebnisse
   ----------------------------------------------------------------------------- */
#suchergebnisse h5 { margin: 0 5px; }
#suchergebnisse h4 { margin: 10px 5px; }
#suchergebnisse .alert { border-radius: 0; padding: 5px; }

#suchergebnisse .articlerow { transition: transform 0.3s ease; }
#suchergebnisse .articlerow.dz-drag-hover { transform: scale(1.05); background: #cae5ff; }
#suchergebnisse .articlerow.blur-effect { background: #f0ffe5; }

/* -----------------------------------------------------------------------------
   Group Container
   ----------------------------------------------------------------------------- */
.groupContainer { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.typeOfGoodHeader {
    transform: rotate(270deg);
    position: relative;
    left: -67px;
    width: 114px;
    height: 20px;
    background: #999;
    border-right: 1px solid var(--color-border-light);
    border-top-left-radius: 24px;
    padding: 1px 5px 0 4px;
    white-space: nowrap;
    overflow: hidden;
    top: 31px;
    margin: 36px 0 -36px 0;
    text-align: right;
    font-size: 13px;
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Counters & Article Numbers
   ----------------------------------------------------------------------------- */
.smallCounter {
    font-size: 0.65em;
    background: var(--color-info);
    color: #fff;
    position: absolute;
    padding: 2px;
    border-radius: 8px;
    font-weight: bold;
    min-width: 16px;
    top: 20px;
    right: 0;
    z-index: 3;
}

.articlenr, .articlenrSmall {
    background-color: #999;
    border-bottom-right-radius: 8px;
    padding: 3px 5px;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    top: 0;
    font-size: 0.8em;
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.articlenr { position: absolute; left: 15px; }
.articlenrSmall { position: relative; float: left; max-width: 25%; left: 0; }

/* -----------------------------------------------------------------------------
   Roll Preview
   ----------------------------------------------------------------------------- */
.rollPreview { margin-top: -8px; margin-bottom: -11px;}

/* -----------------------------------------------------------------------------
   Label Thumbnail
   ----------------------------------------------------------------------------- */
.label-thumbnail { padding: 55px 12px; font-size: 1em; width: 100%; display: block; height: 120px; }

/* -----------------------------------------------------------------------------
   Small Screen Font
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body { font-size: 14px; }
}

/* -----------------------------------------------------------------------------
   Big Input
   ----------------------------------------------------------------------------- */
.bigInput {
    display: block;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    background: #f0f0f0;
    width: 100%;
    font-size: 1.5em;
    margin: 0 0 20px 0;
    padding: 2px 4px;
}

/* -----------------------------------------------------------------------------
   Color Table
   ----------------------------------------------------------------------------- */
#colorTable th, #colorTable td { padding: 4px 0; }
#colorTable { margin-bottom: 20px; }

/* -----------------------------------------------------------------------------
   Article Styling
   ----------------------------------------------------------------------------- */
.articlerow { border-top: 1px solid var(--color-border-light); }
.articlethumb { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* -----------------------------------------------------------------------------
   SVG Navigation Buttons
   ----------------------------------------------------------------------------- */
.SVGbackButton, .SVGforwardButton {
    position: absolute;
    width: 25px;
    top: 0;
    background: #fff;
    color: var(--color-secondary);
}
.SVGbackButton:hover, .SVGforwardButton:hover { background: var(--color-border); color: #138bba; }
.SVGbackButton { left: -25px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.SVGforwardButton { right: -25px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

/* -----------------------------------------------------------------------------
   Animations
   ----------------------------------------------------------------------------- */
.blinking { animation: blink 1s linear infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

@keyframes blur-animation { 0% { filter: blur(0); } 50% { filter: blur(1px); } 100% { filter: blur(0); } }
.blur-effect { animation: blur-animation 1s infinite; }

@keyframes pulse-animation { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }
.pulse-effect { animation: pulse-animation 1s infinite; }

/* -----------------------------------------------------------------------------
   Group Selector
   ----------------------------------------------------------------------------- */
#groupSelectorDropdown {
    width: 80vw;
    position: absolute;
    top: -10px;
    left: -10vw;
    z-index: 14;
    padding: 10px;
    height: 50vh;
    overflow: scroll;
}
#groupSelectorDropdown .btn { text-overflow: ellipsis; }
#groupSelector .input-group { width: 100%; margin-bottom: 10px; }
#groupList .row { margin: 0 -10px; }

/* -----------------------------------------------------------------------------
   History Article
   ----------------------------------------------------------------------------- */
.historyArticle {
    border: 1px solid var(--color-border-light);
    margin: 0 0 4px 0;
    overflow-wrap: break-word;
    border-radius: 5px;
    background: #fafafa;
    font-size: 0.8em;
    padding: 4px;
}

/* -----------------------------------------------------------------------------
   Border Block
   ----------------------------------------------------------------------------- */
.borderblock {
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 15px 10px 0 10px;
    margin: 0 -10px 4px -10px;
    background: var(--color-border-light);
}

/* -----------------------------------------------------------------------------
   Machine Styles
   ----------------------------------------------------------------------------- */
.machine {
    margin: 2px 0;
    border: solid 1px var(--color-border);
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    padding: 4px;
}
.machine-pouch { background: #f0ffe5; }
.machine-label { background: #fff7aa; }
.machine-roll { background: #d2ffa8; }

/* -----------------------------------------------------------------------------
   Parcel Logo
   ----------------------------------------------------------------------------- */
.parcelLogo { max-height: 30px; max-width: 40px; }

/* -----------------------------------------------------------------------------
   Group Buttons
   ----------------------------------------------------------------------------- */
.groupButtons { margin: 4px; width: calc(33% - 8px); white-space: nowrap; overflow: hidden; }

/* -----------------------------------------------------------------------------
   Punch & Preview
   ----------------------------------------------------------------------------- */
.punch { mix-blend-mode: multiply; }
.previewImage { max-width: 100%; max-height: 100%; cursor: zoom-in; }
.modal-body .previewImage { cursor: default; }

/* -----------------------------------------------------------------------------
   Fehlertext
   ----------------------------------------------------------------------------- */
.fehlertext .alert { margin-bottom: 5px; }

/* -----------------------------------------------------------------------------
   Button/Label Light
   ----------------------------------------------------------------------------- */
.btn-light, .label-light { background: var(--color-border); color: #fff; }

/* -----------------------------------------------------------------------------
   Text Utilities
   ----------------------------------------------------------------------------- */
.text-danger { color: var(--color-danger); }
.text-light { color: var(--color-text-muted); }
.bg-light { background: var(--color-border-light); color: var(--color-text-muted); }

/* -----------------------------------------------------------------------------
   Opt Text
   ----------------------------------------------------------------------------- */
.optText { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; }

/* -----------------------------------------------------------------------------
   Dropdown Menu
   ----------------------------------------------------------------------------- */
.dropdown-menu { min-width: 200px; padding: 0; }
[id^="preflightdropdown"] .dropdown-menu { min-width: 400px; column-count: 2; column-gap: 0; }
.dropdown-menu .divider { margin: 0; clear: both; }
.dropdown-menu > li { padding: 0; }
.dropdown-menu > li > a {
    cursor: pointer;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-light);
    max-width: 70vw;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: unset;
    display: block !important;
}
.dropdown-menu > li.dropdown-header { font-size: 0.8em; color: #fff; background: var(--color-text-muted); padding: 5px 10px; }
.dropdown-menu > .active > a { color: #fff; }
.dropdown-menu > .active > a:hover { color: #fff; }
.dropdown-menu > .active > a.materialSelector { color: #000; }

#dADropdown.dropdown-menu { left: auto; right: -100px; max-height: 80vw; overflow: auto; }
.inner.open { max-width: 70vw; }

/* -----------------------------------------------------------------------------
   List Group Header
   ----------------------------------------------------------------------------- */
.listGroupHeader {
    font-size: 0.7em;
    text-transform: uppercase;
    margin: 10px 10px 5px 10px;
    letter-spacing: 0.2em;
    font-weight: bold;
    color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Input Validation
   ----------------------------------------------------------------------------- */
.input-danger, .is-invalid { border: 1px solid var(--color-danger); border-bottom: 4px solid var(--color-danger); }
.invalid-feedback { color: var(--color-danger); font-size: 0.8em; }
.valid-feedback { color: var(--color-primary); font-size: 0.8em; }

/* -----------------------------------------------------------------------------
   Helper Text
   ----------------------------------------------------------------------------- */
.helper { font-size: 0.8em; color: var(--color-danger); }

/* -----------------------------------------------------------------------------
   Input Group Focus
   ----------------------------------------------------------------------------- */
.input-group .form-control { z-index: auto; }
.input-group .form-control:focus { z-index: auto; }

/* -----------------------------------------------------------------------------
   BS4 Input-Group (Prepend/Append/Text) — ergänzt Bootstrap 3
   ----------------------------------------------------------------------------- */
.input-group { display: flex; flex-wrap: nowrap; align-items: stretch; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-prepend,
.input-group-append { display: flex; align-items: stretch; }
.input-group-text {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 10px; font-size: 14px; font-weight: 400;
    line-height: 1; color: #555; text-align: center;
    background: #eee; border: 1px solid #ccc;
    white-space: nowrap; min-width: 42px;
}
.input-group-text .fa { width: 1em; text-align: center; }
/* BS3 compat */
.input-group-addon { display: flex; align-items: center; }
/* Border radius: first keeps left, last keeps right */
.input-group > :first-child,
.input-group > :first-child .input-group-text { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :last-child,
.input-group > :last-child .input-group-text { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Textarea inside input-group */
.input-group > textarea.form-control { height: auto; }
.input-group:has(> textarea) > .input-group-prepend { align-items: flex-start; }
.input-group:has(> textarea) > .input-group-prepend .input-group-text { border-bottom-left-radius: 0; }
/* VanillaSelect inside input-group */
.input-group > .vs-wrapper { flex: 1 1 auto; min-width: 0; }
.input-group > .vs-wrapper > .vs-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .vs-wrapper:last-child .vs-btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.input-group > .vs-wrapper > .vs-dropdown { border-top-left-radius: 0; }

/* -----------------------------------------------------------------------------
   Tooltip & Misc
   ----------------------------------------------------------------------------- */
.tooltip { z-index: 1; }
.clearer { clear: both; }

/* -----------------------------------------------------------------------------
   Bootstrap Select
   ----------------------------------------------------------------------------- */
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { margin: 10px; }

/* -----------------------------------------------------------------------------
   Language Flags
   ----------------------------------------------------------------------------- */
.language { width: 18px; height: 12px; border-radius: 2px; }

/* -----------------------------------------------------------------------------
   Warenkorb Anzeige
   ----------------------------------------------------------------------------- */
#warenkorb-anzeige { background: var(--color-primary); color: #fff; }

/* -----------------------------------------------------------------------------
   Blue Jumbotron
   ----------------------------------------------------------------------------- */
#blueJumbo { background: var(--color-info); color: #fff; }

/* -----------------------------------------------------------------------------
   Alert Default
   ----------------------------------------------------------------------------- */
.alert-default { background: #fff; color: #000; border: 1px solid var(--color-border); }

/* -----------------------------------------------------------------------------
   Date Sidebar
   ----------------------------------------------------------------------------- */
.date_sidebar {
    transform: rotate(90deg) translateX(62px) translateY(53px);
    color: #aaa;
    font-size: 0.9em;
    width: 100px;
    height: 6px;
}

/* =============================================================================
   MOBILE STYLES
   ============================================================================= */
@media (max-width: 640px) {
    #headerLeiste {
        margin: -10px -15px 15px -15px;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }
    #headerLeiste h1 { font-size: 1.3em; margin: 0; }
    #headerLeiste .form-control { margin-top: 0; }

    #headerContainer {
        position: static;
        top: auto;
        margin: -10px -15px 15px -15px;
        padding: 10px 15px;
        box-shadow: none;
    }

    body { padding-top: 60px; }
    #contentContainer { margin-top: 0; margin-bottom: 80px; }
}

@media (max-height: 500px) {
    #headerContainer {
        position: static;
        top: auto;
        margin: 0 -15px 15px -15px;
        padding: 10px 15px;
        box-shadow: none;
    }
}

/* -----------------------------------------------------------------------------
   Vanilla Tooltip & Popover (compat_bridge.js / compat.js)
   ----------------------------------------------------------------------------- */
.portal-tooltip {
    background: #333; color: #fff; padding: 4px 10px; border-radius: 4px;
    font-size: 12px; z-index: 9999; pointer-events: none; white-space: nowrap;
}
.portal-popover {
    background: #fff; border: 1px solid #ccc; border-radius: 4px;
    padding: 10px; z-index: 9999; max-width: 350px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.portal-popover-title { font-weight: 600; margin: 0 0 5px; }

/* -----------------------------------------------------------------------------
   VanillaSelect — Styles sind in /assets/css/vanillaselect.css ausgelagert.
   Muss per <link> im Header eingebunden werden.
   ----------------------------------------------------------------------------- */