/* ============================================================
   Argentarius Edelmetalle – Main Stylesheet
   Complements Bootstrap 5 – design matching argentarius_archeive
   WCAG 2.1 AA compliant
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --color-gold: #d4af37;
    --color-gold-dark: #b8960c;
    --color-price: #69b526;
    --color-cta: #e67200;
    --color-cta-hover: #b95c00;
    --color-danger: #920000;
    --color-muted: #999;
    --color-nav-bg: #555;
    --color-nav-bg-dark: #333;
    --color-ticker-bg: #333;
    --color-ticker-text: #d4af37;
    --font-body: 'Open Sans', sans-serif;
    --font-heading: 'Ubuntu', sans-serif;
}

body {
    font-family: var(--font-body);
    background: #fff;
    color: #666;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: #666;
}

/* --- Skip Link --- */
.skip-link:focus {
    background: var(--color-gold);
    color: #000;
    padding: 0.5rem 1rem;
    z-index: 10000;
}

/* --- Spot Price Ticker --- */
/* --- Testserver banner (shown sitewide when Testserver-Modus is on) --- */
.test-server-banner {
    background: #b02a37;
    color: #fff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #7a1c25;
}
.test-server-banner strong { letter-spacing: 1px; }
.test-server-banner .fa-triangle-exclamation { margin-right: 0.4rem; }

/* --- Homepage announcement banner (admin-toggleable, homepage only) ---
   Same auto-scrolling marquee mechanism as .spot-ticker above: overflow
   hidden, the message duplicated so translateX(-50%) loops seamlessly, a
   shared @keyframes (spot-ticker-scroll), hover-to-pause and a static
   reduced-motion fallback. Only the look (red, larger, centered) differs. */
.homepage-banner {
    overflow: hidden;
    margin: 0 0 0.5rem;
}
/* Homepage main container starts with a lot of top padding by default
   (.container.py-4, shared with every other page); pull the banner up
   closer to the nav bar on the homepage only. Bootstrap's spacing
   utilities (.py-4) are declared !important, so this needs to match. */
.page-home #main-content > .container { padding-top: 0.5rem !important; }
.homepage-banner-marquee { overflow: hidden; }
.homepage-banner-track {
    display: flex;
    width: max-content;
    /* 15s is a fallback only — the template always sets animation-duration
       inline, scaled to the message length (see homepage_banner_duration). */
    animation: spot-ticker-scroll 15s linear infinite;
}
.homepage-banner-track:hover { animation-play-state: paused; }
.homepage-banner-group { display: flex; flex: 0 0 auto; }
.homepage-banner-item {
    display: inline-block;
    white-space: nowrap;
    padding-right: 4rem;
    color: #d10000;
    font-size: 0.9rem;
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .homepage-banner-track { animation: none; flex-wrap: wrap; width: 100%; }
    .homepage-banner-track { justify-content: center; }
    .homepage-banner-group[aria-hidden="true"] { display: none; }
    .homepage-banner-item { padding-right: 0; white-space: normal; text-align: center; }
}

.spot-ticker {
    background: var(--color-ticker-bg);
    color: var(--color-ticker-text);
    padding: 0.35rem 0;
    font-size: 0.72rem;
    letter-spacing: normal;
    overflow: hidden;
}
/* Bulletin-style auto-scrolling marquee. Manual scrolling is impossible
   (overflow: hidden, no scrollbar); the track scrolls itself and loops
   seamlessly because the item group is rendered twice (translateX -50%). */
.spot-ticker-inner { display: flex; align-items: center; gap: 0.9rem; overflow: hidden; }
.spot-ticker-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.spot-ticker-track { display: flex; width: max-content; animation: spot-ticker-scroll 32s linear infinite; }
.spot-ticker-track:hover { animation-play-state: paused; }
.spot-ticker-group { display: flex; align-items: center; flex: 0 0 auto; }
.spot-ticker-item { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 1.6rem; }
.spot-ticker-fixed { flex: 0 0 auto; white-space: nowrap; color: #aaa; font-size: 0.68rem; }
@keyframes spot-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Accessibility: honour reduced-motion — stop the scroll and show a single static
   (wrapping) group so all prices remain readable without movement. */
@media (prefers-reduced-motion: reduce) {
    .spot-ticker-track { animation: none; flex-wrap: wrap; width: 100%; }
    .spot-ticker-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 575.98px) { .spot-ticker-stand { display: none; } }
.spot-ticker strong { color: var(--color-gold); }
.spot-ticker .text-muted { color: #aaa !important; font-size: 0.66rem; }
.spot-ticker .fa-coins { color: var(--color-gold); margin-right: 0.25rem; }
.spot-trend { font-size: 0.7rem; font-weight: 600; margin-left: 0.05rem; white-space: nowrap; }
.spot-trend--up { color: #35c46a; }
.spot-trend--down { color: #ff6b6b; }
.spot-trend--flat { color: #ffc107; }
.spot-trend .fa-solid { font-size: 0.7rem; }

/* --- Topbar --- */
#topbar {
    background: #fafafa;
    border-bottom: 1px solid #eee;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: #666;
}
#topbar a { color: #666; text-decoration: none; }
#topbar a:hover { color: #333; }
#topbar .fa { margin-right: 0.3rem; }

/* --- Header --- */
#header {
    background: #fff;
    padding: 1.25rem 0;
    border-bottom: 1px solid #eee;
}
.brand img { max-height: 60px; }
#row-cart a { color: #333; }
#row-cart .fa-shopping-cart { color: #666; font-size: 1.5rem; }

/* Homepage header has no search bar: reclaim the freed space with a larger,
   more prominent logo, a tighter band, and the cart pinned to the right. */
.page-home #header { padding: 0.6rem 0; }
.page-home #header .row { flex-wrap: nowrap; }
.page-home #row-brand { flex: 0 0 auto; width: auto; max-width: 70%; }
.page-home #row-brand .brand img { max-height: 92px; }
.page-home #row-cart { margin-left: auto; }
.page-home #header .row > .col-sm-1 { display: none; }
@media (max-width: 575.98px) {
    .page-home #row-brand { max-width: 62%; }
    .page-home #row-brand .brand img { max-height: 60px; }
}

/* --- Navigation --- */
#navigation {
    background: linear-gradient(to bottom, #666, #333);
    border: 1px solid #000;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}
#navigation .navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    padding: 0.2rem 1rem;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
#navigation .navbar-nav .nav-link:hover,
#navigation .navbar-nav .nav-link:focus {
    color: #666;
    background: #fff;
}
#navigation .navbar-toggler { border-color: rgba(255,255,255,0.5); }

/* --- Product Cards (matching archive thumbnail-product style) --- */
.product-card {
    background: #fff;
    border: 1px solid #fff;
    margin-bottom: 1.5rem;
    text-align: center;
    transition: box-shadow 0.2s;
}
.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.product-card .card-img-top {
    padding: 1rem;
    background: #fff;
    object-fit: contain;
    height: 220px;
}
.product-card .card-body { padding: 1rem; }
.product-card .card-title {
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 2.8em;
    overflow: hidden;
    color: #333;
}
.product-card .card-title a { color: #333; text-decoration: none; }
.product-card .card-title a:hover { color: var(--color-cta); }
.product-card .price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    margin: 0.5rem 0;
}
.product-card .vat-info { font-size: 0.8rem; color: var(--color-muted); }
.product-card .availability { font-size: 0.8rem; margin-bottom: 0.5rem; }
.product-card .availability .in-stock { color: var(--color-price); }
.product-card .availability .out-of-stock { color: var(--color-danger); font-weight: 600; }

/* Availability icon style (like archive green dot) */
.availability-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 0.3rem; vertical-align: middle;
}
.availability-dot.available { background: #69b526; }
.availability-dot.sold-out { background: #cc0000; }

/* Sold-out overlay */
.product-card.sold-out { opacity: 0.7; }
.sold-out-badge {
    background: #f8d7da;
    color: var(--color-danger);
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.5rem;
}

/* --- Homepage item carousel (multi-item, auto-advancing, manual arrows) --- */
.item-carousel { display: flex; align-items: center; gap: 0.5rem; }
.item-carousel-viewport { overflow: hidden; flex: 1 1 auto; }
/* Position is driven per animation frame in home_carousel.js (constant-speed
   conveyor), so no CSS transition here — one would lag/smear the frame updates. */
.item-carousel-track { display: flex; will-change: transform; }
.item-carousel-slide { flex: 0 0 25%; max-width: 25%; box-sizing: border-box; padding: 0 0.5rem; }
/* Carousel cards are a touch smaller than the full grid below. */
.item-carousel .product-card { margin-bottom: 0; }
.item-carousel .product-card .card-img-top { height: 150px; padding: 0.75rem; }
.item-carousel .product-card .card-body { padding: 0.75rem; }
.item-carousel .product-card .card-title { font-size: 0.85rem; min-height: 2.6em; }
.item-carousel .product-card .price { font-size: 1rem; margin: 0.35rem 0; }
.item-carousel .product-card .vat-info,
.item-carousel .product-card .availability { font-size: 0.72rem; }
.item-carousel-arrow {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
    border: 1px solid #ccc; background: #fff; border-radius: 50%;
    color: #333; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.item-carousel-arrow:hover { background: var(--color-cta); border-color: var(--color-cta); color: #fff; }
/* Page sizes are divisors of 4 (4 / 2 / 1) so full pages always tile cleanly. */
@media (max-width: 991.98px) { .item-carousel-slide { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 575.98px) { .item-carousel-slide { flex-basis: 100%; max-width: 100%; } }

/* Compact "Aktuelle Angebote" belt — deliberately much smaller than the main grid below. */
.item-carousel--compact .item-carousel-slide { flex: 0 0 16.6667%; max-width: 16.6667%; padding: 0 0.35rem; }
.item-carousel--compact .product-card .card-img-top { height: 88px; padding: 0.4rem; }
.item-carousel--compact .product-card .card-body { padding: 0.5rem; }
.item-carousel--compact .product-card .card-title { font-size: 0.72rem; min-height: 2.2em; margin-bottom: 0.2rem; }
.item-carousel--compact .product-card .price { font-size: 0.82rem; margin: 0.2rem 0; }
.item-carousel--compact .product-card .vat-info,
.item-carousel--compact .product-card .availability { font-size: 0.6rem; margin-bottom: 0.25rem; }
.item-carousel--compact .product-card .sold-out-badge { font-size: 0.6rem; }
@media (max-width: 991.98px) { .item-carousel--compact .item-carousel-slide { flex-basis: 33.3333%; max-width: 33.3333%; } }
@media (max-width: 575.98px) { .item-carousel--compact .item-carousel-slide { flex-basis: 50%; max-width: 50%; } }

/* --- Category Grid --- */
.category-card {
    background: #fff;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    text-decoration: none;
    color: inherit;
}
.category-card h3 { font-family: var(--font-heading); color: #333; margin-bottom: 0.3rem; font-size: 1.1rem; }

/* --- Buttons (custom overrides) --- */
.btn-gold {
    background: var(--color-gold);
    color: #fff;
    border-color: var(--color-gold-dark);
    font-weight: 600;
}
.btn-gold:hover { background: var(--color-gold-dark); color: #fff; }

.btn-cta {
    background: var(--color-cta);
    color: #fff;
    border-color: var(--color-cta-hover);
    font-weight: 600;
}
.btn-cta:hover { background: var(--color-cta-hover); color: #fff; }

/* Give a plain `.btn` (no colour variant) a real button appearance so admin
   navigation links don't look like plain text. Scoped with :not() so the
   coloured/outline Bootstrap variants keep their own styles. */
.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):not(.btn-link):not(.btn-cta):not(.btn-gold):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-close) {
    background-color: #eef2f7;
    border: 1px solid #b9c4d3;
    color: #1f2a37;
    font-weight: 600;
    box-shadow: 0 1px 1px rgba(16, 24, 40, 0.06);
}
.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):not(.btn-link):not(.btn-cta):not(.btn-gold):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-close):hover {
    background-color: #dfe6f0;
    border-color: #8a9bb2;
    color: #10151c;
}

/* --- Item Detail --- */
.item-detail { margin-bottom: 2rem; }
.item-detail .item-main-image { max-height: 400px; object-fit: contain; }
.item-detail .item-secondary-image { max-height: 150px; object-fit: contain; margin-top: 0.5rem; }
/* Image box: Bootstrap's .bg-light/.border utilities default to a light-gray
   fill and a gray outline — overridden here (scoped to the item detail page
   only, not the .bg-light/.border classes globally) to match the flattened
   white look used elsewhere on the storefront. */
.item-detail .bg-light { background-color: #fff !important; }
.item-detail .border { border-color: #fff !important; }
.item-specs dt { font-weight: 600; color: #333; }
.item-pricing .price-main { font-size: 2rem; font-weight: 700; color: #333; margin: 0.5rem 0; }
.item-pricing .vat-note { color: var(--color-muted); font-size: 0.85rem; }
.in-stock { color: var(--color-price); font-weight: 600; }
.out-of-stock { color: var(--color-danger); font-weight: 600; }

/* --- Tables --- */
.admin-table, .price-table {
    width: 100%;
    background: #fff;
}
.admin-table thead th, .price-table thead th {
    background: #333;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Preisliste (storefront): tabulated view, one row per item. */
.price-table th, .price-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.price-table-image img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}
.price-table-image i {
    font-size: 1.5rem;
}
.price-table tr.sold-out { opacity: 0.7; }

/* --- Dashboard Grid --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.dashboard-card {
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border-top: 3px solid #666;
}
.dashboard-card h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #333;
}

/* --- Cart --- */
.cart-timer { font-size: 0.85rem; color: #cc0033; font-weight: 600; }
.qty-form { display: inline-flex; align-items: center; gap: 0.25rem; }
.qty-input { width: 3.5rem; text-align: center; }
.qty-btn { min-width: 1.75rem; }

/* --- Checkout --- */
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; }
.checkout-summary {
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    position: sticky;
    top: 120px;
}

/* --- Footer --- */
#footer {
    background: #333;
    color: #999;
    padding-top: 2rem;
    margin-top: 3rem;
}
#footer h3 { color: #fff; font-size: 1rem; margin-bottom: 0.75rem; font-family: var(--font-heading); }
#footer a { color: #ccc; text-decoration: none; }
#footer a:hover { color: #fff; }
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #25D366;
    color: #fff !important;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
}
.whatsapp-btn:hover {
    background: #1ebc59;
    color: #fff !important;
}
.footer-membership {
    background: #fff;
    color: #333;
    border-top: 1px solid #444;
}
.footer-membership-logo {
    height: 64px;
    width: auto;
}
.footer-bottom {
    background: #222;
    color: #777;
    font-size: 0.85rem;
    border-top: 1px solid #444;
}

/* --- Chat Widget --- */
.chat-widget {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
}
.chat-fab {
    background: linear-gradient(135deg, #0d6b52, #15936f);
    color: #fff;
    border: none;
    min-width: 64px;
    height: 64px;
    padding: 0 1rem;
    border-radius: 999px;
    font-size: 1.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 10px 24px rgba(13, 107, 82, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chat-fab-label {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.chat-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(13, 107, 82, 0.34);
}

/* Site-wide Widerruf (cancellation) floating button, sits above the chat FAB */
.widerruf-fab-wrap {
    position: fixed;
    right: 1rem;
    bottom: 5.75rem;
    z-index: 9999;
}
.widerruf-fab {
    background: linear-gradient(135deg, #b02a37, #dc3545);
    color: #fff;
    min-width: 64px;
    height: 48px;
    padding: 0 1rem;
    /* It is a <button> (it must not navigate anywhere), so reset the UA chrome. */
    border: 0;
    font-family: inherit;
    border-radius: 999px;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(176, 42, 55, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.widerruf-fab:hover {
    transform: translateY(-1px);
    color: #fff;
    box-shadow: 0 14px 30px rgba(176, 42, 55, 0.34);
}
.widerruf-fab-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.widerruf-fallback-floating {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: 320px;
    max-width: 80vw;
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
/* Every reveal panel is dismissible; the ✕ sits in its top-right corner.
   Behaviour (✕ / Escape / click outside) lives in js/main.js. */
.widerruf-fallback {
    position: relative;
}
.panel-close {
    position: absolute;
    top: 0.25rem;
    right: 0.35rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    font-size: 1.35rem;
    background: transparent;
    border: 0;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
}
.panel-close:hover,
.panel-close:focus {
    background: #eee;
    color: #000;
}
/* Leave room for the ✕ so it never overlaps the first line of text. */
.widerruf-fallback > p:first-of-type {
    padding-right: 1.75rem;
}
.widerruf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.5rem;
}
.widerruf-text {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin: 0.25rem 0;
    font-family: inherit;
    font-size: 0.85rem;
    max-height: 8rem;
    overflow: auto;
}
.chat-header {
    background: #333;
    color: #fff;
    padding: 0.75rem 1rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    max-height: 300px;
    background: #f7faf8;
}
.chat-message {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    color: #1f2937;
}
.chat-message p {
    margin: 0.35rem 0 0;
    white-space: pre-wrap;
}
.chat-message-admin {
    background: #e7f6f0;
    border: 1px solid #b7e3d3;
}
.chat-message-customer {
    background: #ffffff;
    border: 1px solid #d9e2ec;
}
.chat-message-system {
    background: #f3f4f6;
    border: 1px dashed #cbd5e1;
}
.chat-time {
    display: block;
    margin-top: 0.35rem;
    color: #6b7280;
    font-size: 0.8rem;
}
.chat-panel-input { display: flex; border-top: 1px solid #eee; }
.chat-panel-input input {
    flex: 1;
    border: none;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
}
.chat-panel-input button {
    background: var(--color-cta);
    color: #fff;
    border: none;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-weight: 600;
}
.chat-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    color: #fff;
}
.chat-toggle-btn-active {
    background: #198754;
}
.chat-toggle-btn-active:hover,
.chat-toggle-btn-active:focus {
    background: #157347;
    color: #fff;
}
.chat-toggle-btn-inactive {
    background: #dc3545;
}
.chat-toggle-btn-inactive:hover,
.chat-toggle-btn-inactive:focus {
    background: #bb2d3b;
    color: #fff;
}
.admin-chat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.admin-chat-panel {
    background: #fff;
    border: 1px solid #dbe5df;
    border-radius: 0.9rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    padding: 1rem;
}
.admin-chat-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.admin-chat-panel-header h2 {
    margin: 0;
    font-size: 1rem;
}
.admin-chat-panel-header p {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}
.admin-chat-messages {
    min-height: 220px;
    max-height: 380px;
    margin-bottom: 1rem;
}
.admin-chat-form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    padding: 0.75rem;
    resize: vertical;
}
.admin-live-chat-dock {
    position: fixed;
    right: 1rem;
    bottom: 9.5rem;  /* sit above the Widerruf FAB, not on top of it */
    width: min(420px, calc(100vw - 2rem));
    max-height: 70vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cfe3d8;
    border-radius: 1rem;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    z-index: 9998;
}
.admin-live-chat-dock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #edf7f2;
    border-bottom: 1px solid #d9ece2;
}
.admin-live-chat-dock-header small {
    display: block;
    color: #4b5563;
}
.admin-live-chat-dock-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
#admin-live-chat-minimize {
    font-weight: 700;
    line-height: 1;
    padding: 0.1rem 0.55rem;
    border: 1px solid #b9b9b9;
    background: #fff;
}
/* Minimized launcher: a small headset badge that restores the dock. */
.admin-live-chat-restore {
    position: fixed;
    right: 1rem;
    bottom: 9.5rem;  /* clear the Widerruf FAB below it */
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #1a8f5e;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    z-index: 9998;
}
.admin-live-chat-restore[hidden] { display: none; }
.admin-live-chat-restore:hover { background: #147a4f; }
.admin-live-chat-restore-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 0.65rem;
    background: #d92020;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.3rem;
    text-align: center;
}
.admin-live-chat-restore-badge[hidden] { display: none; }
.admin-live-chat-panels {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
}
.admin-live-chat-panel {
    border: 1px solid #dbe5df;
    border-radius: 0.9rem;
    padding: 0.85rem;
    background: #fbfdfc;
}
.admin-live-chat-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.admin-live-chat-panel-header h3 {
    margin: 0;
    font-size: 1rem;
}
.admin-live-chat-panel-header p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.85rem;
}
.admin-live-chat-messages {
    max-height: 220px;
    min-height: 120px;
    margin-bottom: 0.75rem;
}
.admin-live-chat-form {
    display: flex;
    gap: 0.6rem;
}
.admin-live-chat-form textarea {
    flex: 1;
    min-height: 70px;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    padding: 0.65rem 0.75rem;
    resize: vertical;
}
/* Admin dock – pending request row */
.admin-live-pending-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0;
}
.admin-pending-request {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.65rem;
    padding: 0.65rem 0.9rem;
}
.admin-pending-icon { color: #b45309; font-size: 1.1rem; flex-shrink: 0; }
.admin-pending-label { flex: 1; font-weight: 600; font-size: 0.9rem; }
/* Admin chat list – pending panels */
.admin-chat-panel-pending {
    border-color: #fde68a;
    background: #fffde7;
}
/* Admin live-chat panel header actions */
.admin-live-chat-panel-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
/* Chat state panels inside the widget.
   [hidden] must take priority over the flex display rule – browsers apply
   the user-agent display:none for [hidden] at zero specificity, so any CSS
   property overrides it.  The !important here restores the expected behaviour. */
.chat-state-panel[hidden] { display: none !important; }
.chat-state-panel { flex: 1; display: flex; flex-direction: column; }
.chat-state-active-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.chat-connect-prompt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    gap: 0.5rem;
    color: #374151;
}
.chat-connect-prompt p { margin: 0; font-weight: 600; font-size: 1rem; }
.chat-connect-prompt small { color: #6b7280; font-size: 0.85rem; }
.chat-pending-prompt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    gap: 0.6rem;
    color: #374151;
}
.chat-pending-prompt p { margin: 0; font-weight: 600; }
.chat-pending-prompt small { color: #6b7280; font-size: 0.85rem; }
.chat-spinner {
    width: 36px; height: 36px;
    border: 4px solid #d1fae5;
    border-top-color: #0d6b52;
    border-radius: 50%;
    animation: chat-spin 0.8s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
/* Chat panel must flex to fill the panel when states are inside */
.chat-panel {
    display: none;
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 350px;
    max-height: 480px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
}
.chat-panel.open { display: flex; }
@media (max-width: 640px) {
    .chat-fab-label,
    .widerruf-fab-label {
        display: none;
    }
    .chat-fab {
        width: 64px;
        padding: 0;
        border-radius: 50%;
    }
    .widerruf-fab {
        width: 48px;
        min-width: 48px;
        padding: 0;
        border-radius: 50%;
    }
    .admin-live-chat-dock {
        width: calc(100vw - 1rem);
        right: 0.5rem;
        bottom: 9.5rem;  /* clear the Widerruf FAB on phones too */
    }
}

/* --- Filter Nav --- */
.metal-filter { margin-bottom: 0.75rem; }
.metal-filter a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid #ddd;
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}
.metal-filter a:hover, .metal-filter a.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* --- Price / weight filters + sort toggle --- */
.shop-filters {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0.9rem 1rem;
}
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}
.filter-form .form-control {
    width: 6rem;
}
.range-dash { color: #999; }
.unit-toggle { margin-left: 0.25rem; }
.filter-actions { display: flex; gap: 0.4rem; }
.sort-toggle { margin-left: auto; white-space: nowrap; }

.weight-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eee;
}
.weight-presets .preset {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #555;
    text-decoration: none;
    background: #fff;
}
.weight-presets .preset:hover {
    border-color: #999;
    color: #333;
}
.weight-presets .preset.active {
    background: #0d6b52;
    color: #fff;
    border-color: #0d6b52;
}

@media (max-width: 575.98px) {
    .filter-form .form-control { width: 4.5rem; }
    .sort-toggle { margin-left: 0; }
}

/* --- Cart Timer & Price Updates --- */
.timer {
    font-family: monospace;
    font-size: 0.9rem;
    color: #666;
}
.timer.expired {
    color: var(--color-cta);
    font-weight: 600;
}
.price-updated {
    background: #fff3cd !important;
    transition: background 0.3s ease;
}

/* --- Breadcrumb --- */
.breadcrumb { font-size: 0.85rem; }

/* --- Profile --- */
.profile-card {
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* --- Calendar Widget (Admin) --- */
.calendar-widget { background: #fff; padding: 1rem; margin-bottom: 2rem; }
.calendar-widget table { width: 100%; }
.calendar-widget th { text-align: center; padding: 0.5rem; background: #f8f9fa; font-size: 0.85rem; }
.calendar-widget td { text-align: center; padding: 0.5rem; vertical-align: top; min-width: 100px; height: 80px; border: 1px solid #eee; font-size: 0.85rem; }
.calendar-widget td.today { background: #fff3cd; }
.calendar-widget td .day-number { font-weight: 600; color: #333; display: block; margin-bottom: 0.25rem; }
.calendar-widget td .cal-event { font-size: 0.7rem; background: #e3f2fd; color: #1565c0; padding: 0.15rem 0.3rem; margin: 0.1rem 0; display: block; border-radius: 2px; text-decoration: none; }
.calendar-widget td .cal-event:hover { background: #bbdefb; }

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .product-card .card-img-top { height: 160px; }
}

/* Phones: keep the header on one aligned row, cart shrinks to icon + count */
@media (max-width: 575.98px) {
    #header { padding: 0.75rem 0; }
    #row-search .form-control { font-size: 0.9rem; }
    #row-cart .fa-shopping-cart { font-size: 1.3rem; }
}

/* --- Misc --- */
.text-success { color: var(--color-price) !important; }
.text-danger { color: var(--color-danger) !important; }
.lang-btn { color: #666; font-size: 0.85rem; text-decoration: none; }
.lang-btn:hover { color: #333; }

/* ==========================================================================
   Barrierefreiheit / Accessibility
   Self-hosted a11y toolbar, contrast/colour themes, font scaling, focus and
   reduced-motion handling. No third-party code.
   ========================================================================== */

/* Visible keyboard focus everywhere (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 2px;
}

/* User-toggled reduced motion + OS preference (WCAG 2.3.3). */
html[data-a11y-reduce="1"] *,
html[data-a11y-reduce="1"] *::before,
html[data-a11y-reduce="1"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* OS "more contrast" preference: stronger borders/links. */
@media (prefers-contrast: more) {
    a { text-decoration: underline; }
    .card, .product-card, .admin-table, table { border: 1px solid #000 !important; }
}

/* Font-size scaling (rem-based components scale with the root). */
html[data-a11y-fontscale="lg"] { font-size: 112.5%; }
html[data-a11y-fontscale="xl"] { font-size: 125%; }

/* --- High-contrast theme (black/white/yellow) --------------------------- */
html[data-a11y-theme="contrast"] body {
    background: #000 !important;
    color: #fff !important;
}
html[data-a11y-theme="contrast"] a,
html[data-a11y-theme="contrast"] .spot-ticker strong,
html[data-a11y-theme="contrast"] .text-muted,
html[data-a11y-theme="contrast"] small {
    color: #ffd400 !important;
}
html[data-a11y-theme="contrast"] .card,
html[data-a11y-theme="contrast"] .product-card,
html[data-a11y-theme="contrast"] #footer,
html[data-a11y-theme="contrast"] #topbar,
html[data-a11y-theme="contrast"] .navbar,
html[data-a11y-theme="contrast"] #navigation {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
html[data-a11y-theme="contrast"] .btn,
html[data-a11y-theme="contrast"] .btn-primary,
html[data-a11y-theme="contrast"] .btn-cta,
html[data-a11y-theme="contrast"] .btn-gold {
    background: #ffd400 !important;
    color: #000 !important;
    border: 2px solid #fff !important;
}
html[data-a11y-theme="contrast"] .out-of-stock,
html[data-a11y-theme="contrast"] .text-danger { color: #ff6b6b !important; }
html[data-a11y-theme="contrast"] .in-stock,
html[data-a11y-theme="contrast"] .text-success { color: #51e051 !important; }

/* --- Dark theme --------------------------------------------------------- */
html[data-a11y-theme="dark"] body {
    background: #14161a !important;
    color: #e6e6e6 !important;
}
html[data-a11y-theme="dark"] .card,
html[data-a11y-theme="dark"] .product-card,
html[data-a11y-theme="dark"] #footer {
    background: #1f232b !important;
    color: #e6e6e6 !important;
    border-color: #333 !important;
}
html[data-a11y-theme="dark"] a { color: #ffd768 !important; }
html[data-a11y-theme="dark"] .text-muted,
html[data-a11y-theme="dark"] small { color: #b9b9b9 !important; }

/* --- Colour-blind-safe theme (blue/orange, not green/red) --------------- */
html[data-a11y-theme="cblind"] {
    --color-price: #0072b2;   /* blue instead of green */
    --color-cta: #d55e00;     /* orange */
    --color-cta-hover: #a64600;
    --color-danger: #cc3311;
}
html[data-a11y-theme="cblind"] .in-stock,
html[data-a11y-theme="cblind"] .text-success { color: #0072b2 !important; }
html[data-a11y-theme="cblind"] .out-of-stock,
html[data-a11y-theme="cblind"] .text-danger { color: #cc3311 !important; }

/* --- Accessibility toolbar ---------------------------------------------- */
.a11y-toggle {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1080;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #1a4f8b;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.a11y-toggle:hover { background: #15406f; }

.a11y-panel {
    position: fixed;
    left: 1rem;
    bottom: 4.5rem;
    z-index: 1080;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    color: #222;
    border: 1px solid #bbb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    padding: 1rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.a11y-group { margin-bottom: 0.75rem; }
.a11y-group > span.a11y-label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
.a11y-panel button.a11y-opt {
    display: inline-block;
    margin: 0.15rem 0.15rem 0 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid #1a4f8b;
    background: #fff;
    color: #1a4f8b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.a11y-panel button.a11y-opt[aria-pressed="true"] { background: #1a4f8b; color: #fff; }
.a11y-panel .a11y-reset {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.4rem;
    border: 1px solid #920000;
    background: #fff;
    color: #920000;
    border-radius: 4px;
    cursor: pointer;
}

/* --- Order-line editor (templates/admin_gui/_line_items.html) ---------------
   14 real input columns do not fit any normal screen, so the table gets its own
   horizontal scroller instead of pushing the whole page sideways (which made it
   almost impossible to scroll back to the left). Fixed layout + per-column
   widths keep the inputs proportional to what they hold: wide for names, narrow
   for quantity/rate. */
.line-items-scroll {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    /* Always show the scrollbar so it is obvious the table scrolls. */
    scrollbar-width: auto;
    scrollbar-color: #999 #eee;
}
.line-items-scroll:focus-visible {
    outline: 2px solid #1a4f8b;
    outline-offset: 2px;
}
.line-items-scroll::-webkit-scrollbar {
    height: 12px;
}
.line-items-scroll::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 6px;
}
.line-items-scroll::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 6px;
}
.line-items-scroll::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.line-items-table {
    table-layout: fixed;
    /* Sum of the col-* widths below — below this the scroller kicks in. */
    min-width: 1160px;
    width: 100%;
    margin-bottom: 0;
}
.line-items-table th,
.line-items-table td {
    padding: 0.3rem 0.35rem;
    vertical-align: middle;
}
.line-items-table th {
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}
/* Inputs fill their column exactly; without min-width:0 a select refuses to
   shrink below its widest option and blows the column up again. */
.line-items-table input,
.line-items-table select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
}
.line-items-table .col-item { width: 200px; }
.line-items-table .col-name { width: 170px; }
.line-items-table .col-metal { width: 110px; }
.line-items-table .col-metal-free { width: 120px; }
.line-items-table .col-type { width: 105px; }
.line-items-table .col-type-free { width: 120px; }
.line-items-table .col-purity { width: 85px; }
.line-items-table .col-weight { width: 85px; }
.line-items-table .col-unit { width: 75px; }
.line-items-table .col-qty { width: 60px; }
.line-items-table .col-price { width: 100px; }
/* Wider than the unit price: it holds the figure the customer is quoted. */
.line-items-table .col-total { width: 110px; }
.line-items-table .col-tax { width: 120px; }
.line-items-table .col-rate { width: 60px; }
.line-items-table .col-del { width: 50px; text-align: center; }

/* Generic horizontal scroller for wide admin tables (Artikelverwaltung,
   Reservierungen). The scrollbar sits under the table rather than at the edge
   of the page, which is what makes it findable. */
.table-scroll {
    overflow-x: auto;
    max-width: 100%;
    /* Always shown, so it is obvious the table continues past the edge. */
    scrollbar-width: auto;
    scrollbar-color: #999 #eee;
}
.table-scroll:focus-visible {
    outline: 2px solid #1a4f8b;
    outline-offset: 2px;
}

/* Bestellliste: the Rechnungsnummer is one token ("2026/0042_2 Storno" aside)
   and wrapping it mid-number makes it unreadable at a glance. The width it
   needs is absorbed by .table-scroll. */
.admin-table .col-rechnung {
    white-space: nowrap;
}

/* Bestellliste: every row must stay on one line — a wide customer name or
   long address wrapping mid-cell breaks the at-a-glance table read that this
   list exists for. Overflow is handled by .table-scroll, not by wrapping. */
.order-table td,
.order-table th {
    white-space: nowrap;
}

/* Shared pager for admin list views (Bestellungen, Kunden, Artikel, …). */
.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.pagination [aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}
.pagination-status {
    color: #666;
    font-size: 0.9rem;
}

/* Bulk selection + CSV export toolbar (Artikel- und Kundenliste). */
.bulk-export-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
}
.bulk-select-col {
    width: 2.25rem;
    text-align: center;
}
.bulk-select-col input[type="checkbox"] {
    /* Bigger than the browser default: this is a repeated click target in a
       dense table, and BFSG wants a usable hit area. */
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

/* Artikelverwaltung: every action on one line with its article. Without this
   the four buttons wrap under each other and the row becomes four lines tall;
   the width they need is absorbed by .table-scroll instead. */
.item-actions {
    white-space: nowrap;
}
.item-actions form {
    display: inline;
    margin: 0;
}
.item-actions > * + * {
    margin-left: 0.25rem;
}

/* Reservation overview (templates/admin_gui/reservation_list.html) */
.stock-adjust {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
}
.stock-adjust .stock-input {
    width: 4.5rem;
    padding: 0.2rem 0.3rem;
    text-align: center;
}
/* Admin-editable legal text (shop/agb.html, admin_gui/agb_settings.html). */
.legal-text h2 { margin-top: 1.75rem; }
.legal-text ul { margin: 0.5rem 0 1rem 1.25rem; }

/* The shipping amount in the AGB. Deliberately loud: it is the one figure a
   customer looks for on that page, and it is generated from ShippingSettings
   rather than typed, so it can be styled without the admin having to. */
.agb-versand-betrag {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-gold-dark, #a8862c);
}

.agb-placeholder-help {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: #fafafa;
}
.agb-placeholder-help ul { margin: 0.25rem 0 0.5rem 1.25rem; }
.agb-preview {
    border-top: 1px solid #ddd;
    padding-top: 1rem;
}

/* The Versandkosten pointer on an article page — a link, never a figure. */
.item-shipping-note { margin-top: 0.35rem; }

/* The mailto: fallback next to a customer's address (customer_list.html).
   Quiet on purpose — the address itself is the primary action. */
.mail-local {
    margin-left: 0.4rem;
    text-decoration: none;
    opacity: 0.55;
}
.mail-local:hover,
.mail-local:focus { opacity: 1; }

.reservation-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

/* Bestellliste's last column (templates/admin_gui/order_list.html). One row,
   not a stack, ever: flex-wrap used to wrap the buttons onto extra lines on a
   narrow screen, which made the row (and the whole line, since a table row's
   height follows its tallest cell) taller instead of forcing the table wider.
   nowrap makes the cell — and with it the table — grow past the viewport
   instead, which is what .table-scroll's horizontal scrollbar is for. */
.order-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-end;
}
.order-actions > .btn { white-space: nowrap; }
.reservation-actions form,
.order-actions form {
    margin: 0;
}

/* Bestellliste: Sendungsnummer + Versendet/Bezahlt, one Speichern button per
   row (order_quick_update). Same nowrap-row treatment as .stock-adjust —
   .table-scroll absorbs the extra width. */
.order-quick-update {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}
.order-quick-update .quick-update-input {
    width: 7rem;
}
.order-quick-update label {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
    font-size: 0.8rem;
    margin: 0;
}

/* Rechnung edit form (templates/invoices/rechnung_detail.html) — one form for
   the whole document, so the single save button is pinned in a bar at the end
   of it rather than repeated next to every field. */
.rechnung-save-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 1.5rem;
    padding-top: 1rem;
    border-top: 2px solid #ddd;
}
#rechnung-edit-form .form-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}
#rechnung-edit-form .mb-2 {
    margin-bottom: 0.6rem;
}

/* The Bestandsartikel picker: a search box that is itself the dropdown
   (input + <datalist>), so it has to fill the column like the old select did. */
.line-items-table .item-combo {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
}

/* Chat retention control on the dashboard's Live-Chat card. */
.chat-retention-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.chat-retention-form label {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}
.chat-retention-form input[type="number"] {
    width: 4.5rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
}


/* Logout is a POST form (Django 5 removed GET logout), but it sits in a row of
   nav links and must not look like a button. */
.logout-form {
    display: inline;
}
.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.link-button:hover,
.link-button:focus {
    text-decoration: none;
}


/* Admin-entered free text (Beschreibung, Pragestaette) shown exactly as typed:
   line breaks and indentation preserved, long lines still wrapping. */
.preserve-format {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}


/* Item form: the pricing controls are one decision, so they read as one block.
   The derived group is shown only for "Endpreis vorgeben" (see item_form.js). */
.pricing-block {
    border: 1px solid var(--color-border, #ccc);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 1rem 0;
}
.pricing-block > legend {
    font-size: 1rem;
    font-weight: 600;
    width: auto;
    padding: 0 .4rem;
}
.pricing-derived {
    display: none;                 /* revealed by item_form.js */
    background: #fbfaf6;
}


/* Abwesenheitsnotiz -- shop-wide away banner (base.html + main.js).
   A band under the nav rather than a floating modal: it must be readable and
   dismissible without trapping focus or covering the shop, and it appears on
   every page until closed. */
.absence-notice {
    background: #fff8e1;
    border-bottom: 1px solid #e6c34a;
    color: #5a4300;
}
.absence-notice-inner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.absence-notice-body { flex: 1 1 auto; }
.absence-notice-body strong { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
/* Preserves the admin's line breaks without letting a long word break the
   layout on a phone. */
.absence-notice-body p {
    margin: .15rem 0 0;
    white-space: pre-line;
    overflow-wrap: break-word;
}
.absence-notice-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    color: inherit;
    opacity: .7;
}
.absence-notice-close:hover,
.absence-notice-close:focus { opacity: 1; }
/* The admin preview is the same component without the dismiss button, so it
   needs its own rounding -- it is a box on a page, not a full-width band. */
.absence-notice-preview {
    border: 1px solid #e6c34a;
    border-radius: 6px;
    padding: .75rem 1rem;
}


/* Abwesenheitsnotiz -- modal (base.html + main.js). Deliberately interrupting:
   it puts the shop behind a dimmed backdrop so an away message cannot be
   skimmed past. The .absence-notice band above is the <noscript> fallback and
   the admin preview, and keeps its own styling. */
.absence-modal,
.app-modal {
    position: fixed;
    inset: 0;
    /* Above the chat widget (9998) and the Widerruf FAB (9999), which would
       otherwise float on top of the backdrop and still be clickable. */
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* `hidden` has to beat the display:flex above, which would otherwise keep the
   dialog on screen after it is closed. */
.absence-modal[hidden],
.app-modal[hidden] { display: none; }

.absence-modal-backdrop,
.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}
.absence-modal-dialog,
.app-modal-dialog {
    position: relative;          /* above the backdrop, same stacking context */
    background: #fff;
    border-top: 4px solid var(--color-gold-dark, #a8862c);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    padding: 1.5rem 1.75rem;
    width: 100%;
    max-width: 34rem;
    /* A long admin-written text must scroll inside the dialog rather than
       push the buttons off a phone screen. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.absence-modal-title,
.app-modal-title {
    margin: 0 2rem .5rem 0;      /* clears the close button */
    font-size: 1.25rem;
}
.absence-modal-text,
.app-modal-text {
    margin: 0;
    white-space: pre-line;       /* keeps the admin's line breaks */
    overflow-wrap: break-word;
}
.absence-modal-actions,
.app-modal-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
}
.absence-modal-close,
.app-modal-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    background: none;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    color: #666;
}
.absence-modal-close:hover,
.absence-modal-close:focus,
.app-modal-close:hover,
.app-modal-close:focus { color: #000; }

/* Stops the page scrolling behind the dialog. Removed again on close. */
body.absence-modal-open,
body.app-modal-open { overflow: hidden; }

/* The email dialog carries a form, which the absence notice does not. */
.app-modal-actions { gap: 0.5rem; }
.app-modal-dialog label { display: block; margin-top: 0.75rem; font-weight: 600; }
.app-modal-dialog input[type="email"] { width: 100%; }

/* Lieferzeit statement (shop/_delivery_time.html). Deliberately quiet on the
   tiles and full-weight on the item page, cart and checkout, where it is the
   legally required disclosure rather than a nice-to-have. */
.delivery-time {
    margin: .75rem 0 0;
    line-height: 1.45;
}
.delivery-time-compact {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: #555;
}

/* --- Rechnungen list: bulk email + per-row actions ----------------------
   The list has two action layers: a selection sent by email (bulk bar +
   dialog), and per-row buttons that only exist for Rechnungen whose order was
   already deleted. */
.rechnung-bulk-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .5rem 0 1rem;
    flex-wrap: wrap;
}

/* The row's buttons and the little delete/restore forms sit on one line
   instead of the forms each claiming a block of their own. */
.rechnung-row-actions {
    white-space: nowrap;
}
.rechnung-row-actions form {
    display: inline;
    margin: 0;
}

.rechnung-email-dialog {
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: inherit;
}
.rechnung-email-dialog h2 {
    margin-top: 0;
    font-size: 1.25rem;
}
.rechnung-email-dialog::backdrop {
    background: rgba(0, 0, 0, .45);
}
.rechnung-email-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.25rem;
}