; ensure that utility margin is removed
inside aligned areas so headings inside the container sit on the same baseline as the sidebar title. */
.align-titles .content-inner.padded-main > .container.mt-3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Customer views often wrap content in containers; ensure mt-3 never shifts the title baseline in customer area */
.customer-area .content-inner.padded-main > .container.mt-3 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* As extra safety, neutralize heading top margin for product modal header id used by Produktsuche1 */
.align-titles #productModalHeader {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Align specific customer sidebar 'Artikelgruppen' title with product search heading */
.align-titles .sidebar-kunden-artikelgruppen h5,
.align-titles .sidebar-kunden-artikelgruppen .sidebar-title {
margin-top: 0 !important;
padding-top: 0.25rem !important;
/* left alignment is controlled per-sidebar to avoid jumping */
padding-left: 0 !important;
}
/* Ensure Produktsuche heading uses same top spacing when inside aligned area */
.align-titles .prod-search-indent > h5,
.align-titles .prod-search-indent h5 {
margin-top: 0 !important;
padding-top: 0.25rem !important;
}
/* Ensure all sidebar headings in the Customer area are shifted up and aligned */
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h1,
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h2,
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h3,
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h4,
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h5,
.customer-area .sidebar-col > .sidebar-scroll > .row:first-child h6,
.customer-area .sidebar .sidebar-title,
.customer-area .sidebar h5 {
/* ensure headings are aligned to main content baseline */
transform: translateY(-3px) !important;
margin-left: 0 !important;
padding-left: 0 !important;
/* also normalize display and line-height to avoid layout differences when loaded before JS modifies content */
display: block !important;
line-height: 1.1 !important;
}
/* For the Artikelgruppen sidebar specifically, keep the title exactly on the same left baseline as the tiles/toggles */
.customer-area .sidebar-kunden-artikelgruppen .sidebar-title,
.customer-area .sidebar-kunden-artikelgruppen .artikel-heading {
transform: none !important;
margin-left: 0 !important;
}
/* Customer sidebar headings: generic padding handled per-sidebar to allow precise alignment */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
div#navigation a {
margin: 0 50px; /* Oben/Unten Links/Rechts */
}
/* Stronger HR variant only - leave default
behavior unchanged */
hr.section-strong {
border: 0;
border-top: 3px solid #adb5bd; /* slightly darker gray for emphasis */
margin: 1.5rem 0;
height: 0;
}
/* --- Project-wide background color (light blue) --- */
:root {
--project-bg: #e6f7ff; /* light blue */
}
html, body {
background-color: var(--project-bg);
}
/* Allow container backgrounds to remain transparent so page background shows through */
.container, .container-fluid, .row {
background-color: transparent;
}
/* Override common Bootstrap components so the project background shows everywhere */
.navbar, .navbar.bg-white, .navbar .container-fluid, .navbar-brand, .navbar-nav, .navbar .nav-link, .navbar-toggler {
background-color: var(--project-bg) !important;
}
.list-group, .list-group-item, .list-group-item-action {
background-color: var(--project-bg) !important;
border-color: rgba(0,0,0,0.08);
}
.card, .card-body {
background-color: var(--project-bg) !important;
border-color: rgba(0,0,0,0.08) !important;
}
/* Tables: make headers and cells use the project background so tables appear on same light-blue canvas */
.table, .table th, .table td, .table thead th, .table tbody tr {
background-color: var(--project-bg) !important;
}
/* Dropdowns, modals and other floating panels */
.dropdown-menu, .modal-content, .popover, .toast, .tooltip-inner {
background-color: var(--project-bg) !important;
color: inherit !important;
}
/* Footer */
.footer, footer {
background-color: var(--project-bg) !important;
}
/* Preserve readable text color where needed */
.navbar .nav-link, .list-group-item, .card, .card-body, .dropdown-item, .dropdown-menu a, .table th, .table td {
color: inherit;
}
/* Sidebar navs: make sure nav-based sidebars also show the project background */
.nav.flex-column {
background-color: var(--project-bg) !important;
padding: 0.25rem 0.5rem !important;
border-radius: 0.25rem;
}
.nav.flex-column .nav-item {
width: 100%;
}
.nav.flex-column .nav-link {
display: block;
width: 100%;
background-color: transparent !important; /* let parent background show */
color: inherit !important;
padding: 0.25rem 0.5rem !important;
}
/* ensure header in sidebar also uses project bg */
h3, h4, h5 {
background-color: transparent !important;
}
/* Sidebar column override: force project background for narrow sidebar columns */
.col-md-1, .col-md-1 * {
background-color: var(--project-bg) !important;
}
/* Ensure links inside sidebars don't get white backgrounds */
.col-md-1 a, .col-md-1 a.nav-link, .col-md-1 a.list-group-item {
background-color: transparent !important;
color: inherit !important;
}
/* Specific override for sidebar partial that uses plain anchors and
*/
.col-md-1 h3 {
margin: 0 0 0.5rem 0;
padding-left: 0.5rem;
color: inherit;
background-color: transparent !important;
}
/* If any sidebar uses .sidebar class, ensure it is light-blue.
Do not force it onto all descendants, otherwise it paints over tile backgrounds/borders. */
.sidebar {
background-color: var(--project-bg) !important;
}
/* Force main/article area and related containers to use project bg */
.col-md-11, .col-md-11 > .table-responsive, .col-md-11 .table-responsive, .main-content, .druckbereich, .druckbereich .col-md-11 {
background-color: var(--project-bg) !important;
}
/* Ensure inner elements do not force white backgrounds inside the main area */
/* Exclude .btn and button descendants so Bootstrap button styles remain intact */
.col-md-11 *:not(.btn):not(.btn *), .druckbereich *:not(.btn):not(.btn *), .table-responsive *:not(.btn):not(.btn *), .main-content *:not(.btn):not(.btn *) {
background-color: transparent !important;
color: inherit !important;
}
/* If any element explicitly uses bg-white inside the article area, override it */
.col-md-11 .bg-white, .druckbereich .bg-white {
background-color: var(--project-bg) !important;
color: inherit !important;
}
/* Ensure table responsiveness doesn't add white panels */
.table-responsive {
background-color: transparent !important;
}
/* Additional specificity for the article table used in Suchresultat */
table.table, table.table > thead > tr, table.table > tbody > tr, table.table th, table.table td {
background-color: transparent !important;
}
/* Print styles: always use white background when printing */
@media print {
:root { --project-bg: #ffffff !important; }
html, body, .container, .container-fluid, .row {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Ensure components that have colored backgrounds print white */
.navbar, .footer, .card, .list-group-item, .dropdown-menu, .modal-content, .table, .popover, .toast {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Preserve print color fidelity for backgrounds */
* {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
}
/* Keep form controls and selects white for readability */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
/* Checkbox / radio inputs keep native white background where applicable */
.form-check-input {
background-color: #ffffff !important;
}
/* Bootstrap dropdown menus used in forms should print as white lists */
.dropdown-menu,
.dropdown-item {
background-color: #ffffff !important;
color: inherit !important;
}
/* Ensure focus outlines remain visible on white controls */
.form-control:focus, .form-select:focus {
box-shadow: 0 0 0 0.1rem rgba(37,140,251,0.15), 0 0 0 0.25rem #258cfb;
}
/* Buttons: explicitly restore Bootstrap default palette to prevent transparent buttons showing page background */
.btn-primary {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus {
background-color: #0b5ed7 !important;
border-color: #0a58ca !important;
}
.btn-secondary {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #ffffff !important;
}
.btn-success {
background-color: #198754 !important;
border-color: #198754 !important;
color: #ffffff !important;
}
.btn-danger {
background-color: #dc3545 !important;
border-color: #dc3545 !important;
color: #ffffff !important;
}
.btn-warning {
background-color: #ffc107 !important;
border-color: #ffc107 !important;
color: #000000 !important;
}
.btn-info {
background-color: #0dcaf0 !important;
border-color: #0dcaf0 !important;
color: #000000 !important;
}
.btn-light {
background-color: #f8f9fa !important;
border-color: #f8f9fa !important;
color: #000000 !important;
}
.btn-dark {
background-color: #212529 !important;
border-color: #212529 !important;
color: #ffffff !important;
}
/* Stronger selector rules for button variants (anchors, buttons, inputs) to ensure colors are applied everywhere */
a.btn.btn-primary, button.btn.btn-primary, input[type="submit"].btn.btn-primary, input[type="button"].btn.btn-primary {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
background-image: none !important;
}
a.btn.btn-secondary, button.btn.btn-secondary, input[type="submit"].btn.btn-secondary, input[type="button"].btn.btn-secondary {
background-color: #6c757d !important;
border-color: #6c757d !important;
color: #ffffff !important;
background-image: none !important;
}
a.btn.btn-success, button.btn.btn-success, input[type="submit"].btn.btn-success, input[type="button"].btn.btn-success {
background-color: #198754 !important;
border-color: #198754 !important;
color: #ffffff !important;
background-image: none !important;
}
a.btn.btn-danger, button.btn.btn-danger, input[type="submit"].btn.btn-danger, input[type="button"].btn.btn-danger {
background-color: #dc3545 !important;
border-color: #dc3545 !important;
color: #ffffff !important;
background-image: none !important;
}
/* Ensure default btn retains primary look when no variant class is present */
a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark),
button.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark),
input[type="submit"].btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark) {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
background-image: none !important;
}
/* Keep link-style buttons and nav links readable */
.btn-link, .nav-link {
color: inherit !important;
}
/* Ensure form controls remain white even inside overridden containers (higher specificity) */
.col-md-11 .form-control,
.col-md-11 .form-select,
.col-md-11 input[type="text"],
.col-md-11 input[type="email"],
.col-md-11 input[type="password"],
.col-md-11 input[type="number"],
.col-md-11 input[type="search"],
.col-md-11 input[type="tel"],
.col-md-11 input[type="url"],
.col-md-11 textarea,
.col-md-11 select,
.druckbereich .form-control,
.druckbereich .form-select,
.druckbereich input[type="text"],
.druckbereich input[type="email"],
.druckbereich input[type="password"],
.druckbereich input[type="number"],
.druckbereich input[type="search"],
.druckbereich input[type="tel"],
.druckbereich input[type="url"],
.druckbereich textarea,
.druckbereich select,
.container .form-control,
.container .form-select,
.form-control.form-control,
.form-select.form-select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
/* Also ensure select elements inside sidebars remain white for readability */
.col-md-1 select, .col-md-1 .form-select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
/* Ensure all input/select/textarea elements show white background for readability
Exclude checkboxes, radios, and button/submit inputs. Use high specificity and !important to override page background rules. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body textarea,
body select,
body .form-control,
body .form-select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
/* Utility: make inputs half width (50%) on medium+ screens, full width on small screens */
.half-width-input {
width: 100% !important; /* default full width for small screens */
box-sizing: border-box !important;
}
@media (min-width: 768px) {
.half-width-input {
width: 50% !important;
}
}
/* Multilingual heading and translation styling */
.multilang-heading {
display: flex;
gap: 0.5rem;
align-items: baseline;
flex-wrap: wrap;
}
.multilang-heading .heading-lang {
padding: 0.15rem 0.35rem;
border-radius: 0.25rem;
background-color: rgba(255,255,255,0.06);
}
.lang-translations {
margin-top: 0.25rem;
display: block;
}
.lang-translations span[lang] {
display: block;
padding: 0.06rem 0.25rem;
border-radius: 0.2rem;
background-color: rgba(255,255,255,0.03);
font-size: 0.95rem;
margin-bottom: 0.18rem;
}
/* Info block shown on login with multilingual paragraphs */
.info-multilang {
background-color: transparent; /* remove visible background */
border: none; /* remove border */
padding: 0 0.75rem; /* minimal horizontal padding to separate from inputs */
border-radius: 0; /* no rounding */
margin-bottom: 1rem;
}
.info-multilang h4 {
margin: 0 0 0.5rem 0;
}
.info-multilang .lang-translations > div[lang] {
margin-bottom: 0.5rem;
}
.info-multilang p {
margin: 0.2rem 0 0.6rem 0;
}
@media (min-width: 768px) {
.info-multilang.h-100 {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
}
/* Ensure all select elements (native and Bootstrap .form-select) are white, including their options */
body select,
body select.form-select,
body .form-select,
.col-md-11 select,
.druckbereich select,
.col-md-1 select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
-webkit-appearance: menulist-button !important;
-moz-appearance: menulist-button !important;
appearance: menulist-button !important;
}
/* Options must also have white background to avoid white-on-blue rendering in some browsers */
body select option,
body .form-select option,
.col-md-11 select option,
.druckbereich select option,
.col-md-1 select option {
background-color: #ffffff !important;
color: inherit !important;
}
/* Disabled/readonly selects remain white */
select[disabled], select[readonly], .form-select[disabled], .form-select[readonly] {
background-color: #ffffff !important;
opacity: 1 !important;
}
/* Specific: inputs inside cards and search forms */
.card .form-control, .card .form-select, .card input, .card textarea, .search-card .form-control, .search-card .form-select {
background-color: #ffffff !important;
color: inherit !important;
border: 1px solid rgba(0,0,0,0.15) !important;
}
/* Ensure checkboxes and radio buttons have white background and readable borders */
input[type="checkbox"], input[type="radio"], .form-check-input, .form-check-input[type="checkbox"], .form-check-input[type="radio"] {
background-color: #ffffff !important;
border: 1px solid rgba(0,0,0,0.15) !important;
background-image: none !important;
-webkit-appearance: checkbox !important;
appearance: auto !important;
width: 1.15em !important;
height: 1.15em !important;
padding: 0 !important;
vertical-align: middle !important;
accent-color: initial !important; /* keep browser default accent for checkmark */
}
/* Keep checked state clearly visible on white background */
input[type="checkbox"]:checked, input[type="radio"]:checked, .form-check-input:checked {
background-color: #ffffff !important;
color: inherit !important;
}
/* Ensure disabled/readonly checkboxes/radios remain white and visible */
input[type="checkbox"][disabled], input[type="radio"][disabled], .form-check-input[disabled] {
background-color: #ffffff !important;
opacity: 1 !important;
}
/* --- Strong override: force selects to white in all states (last resort) --- */
select.form-select, .form-select, select {
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
background-image: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
}
/* FINAL OVERRIDE: force every .form-select / select to display white background (highest specificity) */
html body select.form-select, html body .form-select, html body select.form-select:not([multiple]) {
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 12px 8px !important;
padding-right: 2.25rem !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
background-clip: padding-box !important;
-webkit-text-fill-color: #000000 !important;
opacity: 1 !important;
}
/* Remove native expand control on IE/Edge */
html body select.form-select::-ms-expand { display: none !important; }
/* WebKit decorations */
html body select.form-select::-webkit-inner-spin-button, html body select.form-select::-webkit-outer-spin-button, html body select.form-select::-webkit-search-decoration { display: none !important; }
/* Focus state remains white */
html body select.form-select:focus, html body .form-select:focus {
background-color: #ffffff !important;
color: #000000 !important;
outline: none !important;
}
/* Option list white as well */
html body select.form-select option, html body .form-select option {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Autofill placeholder: force background white */
html body select.form-select:-webkit-autofill { background-color: #ffffff !important; -webkit-text-fill-color: #000000 !important; }
/* Target specific select fields by name to guarantee white background */
select[name="CodeVk"], .form-select[name="CodeVk"],
select[name="LandID"], .form-select[name="LandID"],
select[name="Branche"], .form-select[name="Branche"] {
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 12px 8px !important;
padding-right: 2.25rem !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* Also ensure the displayed value area (pseudo-element) stays white */
select[name="CodeVk"]::-ms-expand, select[name="LandID"]::-ms-expand, select[name="Branche"]::-ms-expand { display: none !important; }
select[name="CodeVk"] option, select[name="LandID"] option, select[name="Branche"] option {
background-color: #ffffff !important;
color: #000000 !important;
}
/* Edge/Chromium and forced-colors overrides to prevent system accent from coloring selects */
html {
color-scheme: light;
}
select.form-select, .form-select, select {
/* prevent UA forced colors from recoloring the control */
forced-color-adjust: none !important;
-ms-high-contrast-adjust: none !important;
/* ensure appearance reset */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid rgba(0,0,0,0.15) !important;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 0.75rem center !important;
background-size: 12px 8px !important;
padding-right: 2.25rem !important;
opacity: 1 !important;
}
/* In Windows' forced-colors mode ensure white fill for the control box */
@media (forced-colors: active) {
select.form-select, .form-select, select {
background-color: #ffffff !important;
color: #000000 !important;
border-color: #000 !important;
}
}
/* -----------------------------------------------------------------
Sidebar width consistency rules (added to ensure uniform sidebars)
----------------------------------------------------------------- */
/* The sidebar column in _Layout.cshtml uses class .sidebar-col. Force a fixed width so all sidebars look identical. */
.sidebar-col {
/* fixed width for sidebar area */
flex: 0 0 220px !important;
max-width: 220px !important;
padding-right: 0.75rem; /* small gap between sidebar and content */
}
/* Prevent the left edge of the customer sidebar from being clipped (mobile/overflow-x scenarios) */
.customer-area .sidebar-col {
padding-left: 0.25rem !important;
overflow: visible !important;
}
/* Customer header: make the article view toggle a bit narrower */
.customer-area #layoutArticleViewPrefBtn {
padding-left: 0.4rem !important;
padding-right: 0.4rem !important;
font-size: 0.82rem !important;
}
/* Ensure the main column fills remaining space */
.main-col {
flex: 1 1 auto !important;
min-width: 0; /* allow content to shrink properly */
}
/* Make sure list-group and nav elements fill the sidebar width */
.sidebar-col .list-group,
.sidebar-col .nav.flex-column,
.sidebar-col h3 {
width: 100% !important;
}
/* Remove stacking behavior on very small screens so main stays to the right of sidebars.
Allow horizontal scrolling instead of wrapping. */
/* NOTE: We intentionally avoid setting sidebar to 100% width on small screens. */
.container-fluid {
overflow-x: auto; /* enable horizontal scroll when viewport is narrower than sidebar + main */
}
/* Slightly narrower sidebar on small-medium screens to improve space for content */
@media (min-width: 576px) and (max-width: 991.98px) {
.sidebar-col {
flex: 0 0 180px !important;
max-width: 180px !important;
}
}
/* -----------------------------------------------------------------
Sidebar visual consistency (ensure light-blue background and uniform width for all sidebar partials)
----------------------------------------------------------------- */
.sidebar {
width: 100%;
box-sizing: border-box;
padding: 0.5rem !important;
background-color: var(--project-bg) !important;
border-radius: 0.25rem;
}
/* Customer Artikelgruppen: override generic sidebar padding so title aligns with tile edge */
.sidebar.sidebar-kunden-artikelgruppen {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
/* Customer area: give the left edge a bit more breathing room so tiles/headings aren't clipped */
.customer-area .sidebar-col .sidebar {
/* Align sidebar title with the toggle/content baseline */
padding-left: 0.5rem !important;
}
.sidebar-title {
margin: 0 0 0.5rem 0;
padding-left: 0.25rem;
color: inherit;
font-weight: 600;
}
/* Customer Artikelgruppen: heading must be flush with tile baseline (no extra sidebar-title padding) */
.sidebar-kunden-artikelgruppen .sidebar-title,
.sidebar-kunden-artikelgruppen .artikel-heading {
padding-left: 0 !important;
}
/* Ensure list and nav based sidebars fill the sidebar column and inherit the bg */
.sidebar .list-group,
.sidebar .nav.flex-column {
background-color: transparent !important; /* parent .sidebar already has the bg */
padding: 0;
margin: 0;
}
.sidebar .list-group-item,
.sidebar .nav .nav-link,
.sidebar a.list-group-item,
.sidebar a.nav-link {
background-color: transparent !important; /* let parent .sidebar color show */
color: inherit !important;
padding: 0.25rem 0.5rem !important;
border: none !important;
width: 100%;
display: block;
box-sizing: border-box;
}
.sidebar .list-group-item:hover,
.sidebar .nav .nav-link:hover {
background-color: rgba(0,0,0,0.03) !important;
}
/* --- Tile baseline styles (used by `_SidebarArtikel1` and reused for customer sidebars) --- */
.artikel-tiles {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
.artikel-tile {
display: flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.25rem;
margin-bottom: 0;
border-radius: 0;
background-color: #ffffff !important;
color: #1f2d3d !important;
text-decoration: none;
height: 28px;
line-height: 1;
font-size: 0.9rem;
border: 1px solid #d6d6d6;
box-sizing: border-box;
width: 100%;
}
.artikel-tile:hover {
background-color: #f8f9fa !important;
text-decoration: none;
}
.artikel-tile.active {
font-weight: 700;
background-color: #eef2f6 !important;
border-color: #cfd8df;
}
/* Heading used by tile-style sidebars */
.artikel-heading {
display: block;
padding-left: 0;
padding-right: 0;
margin: 0 0 0.25rem 0;
font-size: 15px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
overflow: visible;
}
/* --- Customer sidebars: tile look (reuse the same visual language as `_SidebarArtikel1`) --- */
.customer-area .kunden-gruppen-tiles .artikel-tile {
height: 28px;
font-size: 0.9rem;
/* Let the sidebar container define indentation so it is identical everywhere */
width: 82%;
margin-left: 0;
}
/* Center narrower tiles within each column */
.sidebar-kunden-artikelgruppen .artikel-tiles {
align-items: center;
}
/* Customer Artikelgruppen sidebar: title and tiles align to the same left baseline */
.customer-area .sidebar-kunden-artikelgruppen .sidebar-title,
.customer-area .sidebar-kunden-artikelgruppen .artikel-heading,
.customer-area .sidebar-kunden-artikelgruppen .artikel-tiles {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Ensure the title row uses the same inset as the tiles (the outer sidebar provides the inset) */
.customer-area .sidebar-kunden-artikelgruppen .row,
.customer-area .sidebar-kunden-artikelgruppen .col-12 {
padding-left: 0 !important;
}
/* When opening via the logo the view can be missing `.customer-area` in some cases; apply the same rules defensively */
.sidebar-kunden-artikelgruppen {
padding-left: 0.5rem !important;
padding-right: 0.25rem !important;
border-left: 2px solid rgba(0,0,0,0.22) !important;
}
/* Title should start exactly where tiles start */
.sidebar-kunden-artikelgruppen .sidebar-title,
.sidebar-kunden-artikelgruppen .artikel-heading {
padding-left: 0 !important;
}
/* Ensure the left border of the first tile is visible (some backgrounds make the container border hard to see) */
.sidebar-kunden-artikelgruppen .artikel-tiles .artikel-tile {
border-left-color: rgba(0,0,0,0.35) !important;
}
/* Remove the visual "missing left edge" caused by the center gutter line: no gap between the two tile columns */
.customer-area .sidebar-kunden-artikelgruppen .row {
--bs-gutter-x: 0.35rem !important;
}
/* Ensure there is a visible space between the two tile columns (inline styles set padding to 0) */
.sidebar-kunden-artikelgruppen > .row:last-of-type > .col-6:first-child {
padding-right: 0.2rem !important;
}
.sidebar-kunden-artikelgruppen > .row:last-of-type > .col-6:last-child {
padding-left: 0.2rem !important;
}
.customer-area .ia-customer-tiles .ia-customer-tile {
justify-content: flex-start;
gap: 0.35rem;
padding-left: 0.45rem;
padding-right: 0.45rem;
}
.customer-area .ia-customer-tiles .ia-customer-tile .ia-label,
.customer-area .ia-customer-tiles .ia-customer-tile small {
white-space: nowrap;
}
/* Make sure all sidebars use the same inner width and do not introduce extra margins */
.sidebar-col .sidebar {
width: 100%;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
/* But for the customer article group sidebar, keep its explicit padding (it defines the visual baseline) */
.sidebar-col .sidebar.sidebar-kunden-artikelgruppen {
padding-left: 0.5rem !important;
padding-right: 0.25rem !important;
}
/* If any sidebar partial uses direct anchors or other markup, ensure they don't force a white background */
.sidebar-col a,
.sidebar-col a.nav-link,
.sidebar-col a.list-group-item {
background-color: transparent !important;
color: inherit !important;
}
/* Slight visual tweak: ensure the sidebar column and its children don't add unexpected box-shadow or white panels */
.sidebar-col, .sidebar-col * {
box-shadow: none !important;
}
/* Fast collapse rules to minimize JS work and improve mobile responsiveness */
.sidebar-collapsible .sidebar-content { display: block; }
.sidebar-collapsible.collapsed .sidebar-content { display: none !important; }
/* hide non-essential headers/actions when collapsed to keep toggle visible */
.sidebar-collapsible.collapsed .rechnung-actions { display: none !important; }
.sidebar-collapsible.collapsed .sidebar-title { display: none !important; }
/* ensure toggle remains visible */
.sidebar-collapsible .sidebar-toggle { display: inline-flex !important; align-items: center; }
/* mobile adjustments */
@media (max-width: 768px) {
.sidebar-collapsible.collapsed { padding-left: 0 !important; padding-right: 0 !important; }
.sidebar-collapsible.collapsed .d-flex.d-md-none { display: flex !important; }
}
/* Responsive small-screen sidebar behavior: narrow column + overlay expand */
@media (max-width: 768px) {
/* Make collapsed sidebar narrow but keep toggle visible and centered */
.sidebar-collapsible.collapsed {
width: 64px !important;
flex: 0 0 64px !important;
max-width: 64px !important;
min-width: 64px !important;
overflow: hidden !important;
position: relative !important;
background-color: rgba(255,255,255,0.02) !important;
transition: width 160ms linear !important;
}
.sidebar-collapsible .sidebar-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 48px !important;
padding: 0 !important;
background: transparent !important;
border-left: 4px solid rgba(0,0,0,0.06) !important;
}
.sidebar-collapsible .sidebar-toggle .toggle-icon {
font-size: 1.4rem !important;
line-height: 1 !important;
color: #0d6efd !important; /* highlighted color */
text-shadow: 0 1px 0 rgba(255,255,255,0.12);
}
/* overlay expanded state */
.sidebar-collapsible:not(.collapsed) {
transition: transform 160ms ease-in-out !important;
transform: translateX(0) !important;
position: fixed !important;
left: 0 !important;
top: 56px !important;
width: 240px !important;
max-width: 86vw !important;
height: calc(100vh - 56px) !important;
overflow: auto !important;
z-index: 1060 !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
background-color: var(--project-bg) !important;
}
}
/* Hide sidebar entirely when marked hidden on small screens */
@media (max-width: 768px) {
.sidebar-collapsible.sidebar-hidden {
display: none !important;
}
/* Ensure collapsed (but not hidden) sidebar still shows toggle */
.sidebar-collapsible.collapsed .sidebar-toggle { visibility: visible !important; opacity: 1 !important; }
}
/* -----------------------------------------------------------------
Image enlarge / lightbox (customer views)
----------------------------------------------------------------- */
.fehrlin-image-zoom-container {
position: relative;
display: inline-block;
}
.fehrlin-image-zoom-container img[data-fehrlin-lightbox] {
cursor: zoom-in;
}
.fehrlin-image-zoom-hint {
position: absolute;
right: 4px;
bottom: 4px;
font-size: 12px;
line-height: 1;
padding: 2px 4px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.2);
background: rgba(255,255,255,0.85);
color: #000;
pointer-events: none;
}
.fehrlin-image-lightbox {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.75);
z-index: 3000;
}
.fehrlin-image-lightbox img {
max-width: 92vw;
max-height: 92vh;
object-fit: contain;
background: #fff;
padding: 8px;
border-radius: 4px;
cursor: zoom-out;
}