@import "theme-editor.css";
/* Globale Komponenten-Klassen */
@import url("./components/card-icon-box.css");
/* View-spezifische Styles (jede View bekommt eigene Datei) */
@import url("./views/inventory-location-settings.css");
@import url("./views/tab-ebay.css");
@import url("./views/product-overview.css");

/* ==================== DESIGN TOKENS ====================
 * Semantic tokens that views should use instead of hardcoded hex values.
 * Light-mode defaults live on :root; dark-mode overrides live inside the
 * [theme~="dark"] selector further down.
 */
html {
    /* Lumo brand color (also aliased in theme-editor.css) */
    --lumo-primary-color: #15779b;
    --lumo-primary-color-50pct: rgba(21, 119, 155, 0.5);
    --lumo-primary-text-color: #15779b;

    /* App semantic tokens — light defaults */
    --app-accent: #0D98AF;
    --app-accent-soft: rgba(13, 152, 175, 0.10);
    --app-success: #10b981;
    --app-success-soft: rgba(16, 185, 129, 0.10);
    --app-warning: #f59e0b;
    --app-warning-soft: rgba(245, 158, 11, 0.10);
    --app-danger: #ef4444;
    --app-danger-soft: rgba(239, 68, 68, 0.10);
    --app-info: #8b5cf6;
    --app-info-soft: rgba(139, 92, 246, 0.10);
    --app-pink: #ec4899;
    --app-pink-soft: rgba(236, 72, 153, 0.10);
    --app-muted: #6b7280;
    --app-muted-soft: rgba(107, 114, 128, 0.12);

    --app-card-bg: var(--lumo-base-color);
    --app-card-border: var(--lumo-contrast-10pct);
    --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --app-surface-2: var(--lumo-contrast-5pct);

    /* Primary gradient endpoints (used by buttons, FAB) */
    --app-primary-end: #11607d;
    --app-primary-hover-start: #1a8cb8;

    /* Always-dark overlay (lightboxes, image viewers) — kept hardcoded by design */
    --app-overlay-bg: #000000;
    --app-overlay-on-bg: #ffffff;

    /* Brand colors that must not adapt to dark mode (third-party identity).
     * Each brand has a -soft variant for backgrounds (15% alpha). */
    --brand-shopify: #95BF47;
    --brand-shopify-soft: rgba(149, 191, 71, 0.15);
    --brand-woocommerce: #96588A;
    --brand-woocommerce-soft: rgba(150, 88, 138, 0.15);
    --brand-shopware: #189EFF;
    --brand-shopware-soft: rgba(24, 158, 255, 0.15);
    --brand-gambio: #FF6B00;
    --brand-gambio-soft: rgba(255, 107, 0, 0.15);

    --app-header-bg: linear-gradient(90deg, #15779b 0%, #11607d 100%);
    --app-header-fg: #FFFFFF;

    --vaadin-input-field-readonly-border: 1px solid var(--lumo-contrast-20pct);
}

/* Dark mode overrides — Lumo's built-in dark palette kicks in automatically,
 * we only override the app-specific tokens that need different values.
 */
html[theme~="dark"] {
    /* Lift the Lumo primary color in dark mode so buttons, links, sidenav
     * current-item, etc. stay readable on dark surfaces. */
    --lumo-primary-color: #22c8e0;
    --lumo-primary-color-50pct: rgba(34, 200, 224, 0.5);
    --lumo-primary-text-color: #6ddbea;

    --app-accent: #22c8e0;
    --app-accent-soft: rgba(34, 200, 224, 0.15);
    --app-success: #34d399;
    --app-success-soft: rgba(52, 211, 153, 0.15);
    --app-warning: #fbbf24;
    --app-warning-soft: rgba(251, 191, 36, 0.15);
    --app-danger: #f87171;
    --app-danger-soft: rgba(248, 113, 113, 0.15);
    --app-info: #a78bfa;
    --app-info-soft: rgba(167, 139, 250, 0.15);
    --app-pink: #f472b6;
    --app-pink-soft: rgba(244, 114, 182, 0.15);
    --app-muted: #9ca3af;
    --app-muted-soft: rgba(156, 163, 175, 0.14);

    --app-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);

    /* Lift gradient endpoints in dark mode so primary buttons stay readable */
    --app-primary-end: #0b3a4c;
    --app-primary-hover-start: #2dd4f0;

    --app-header-bg: linear-gradient(90deg, #0b3a4c 0%, #072b38 100%);
}

/* ==================== HEADER ==================== */
#header {
    height: var(--lumo-size-xl);
    background: var(--app-header-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Theme toggle button in header */
.theme-toggle {
    color: var(--app-header-fg) !important;
    background: transparent !important;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.theme-toggle vaadin-icon {
    color: var(--app-header-fg);
}

/* App-level banners (setup, token expiry) render as their own full-width row
 * below the header. This requires the AppLayout navbar to wrap. */
vaadin-app-layout::part(navbar) {
    flex-wrap: wrap;
}

.app-banner {
    flex-basis: 100%;
    width: 100%;
    order: 99;
}

/* Setup banner — slim, subtle, still attention-grabbing */
.setup-banner {
    background: linear-gradient(90deg,
        var(--app-accent-soft) 0%,
        var(--app-accent-soft) 100%);
    border-top: 1px solid var(--app-accent);
    padding: 6px var(--lumo-space-m) !important;
    gap: var(--lumo-space-s) !important;
    min-height: 0 !important;
}

.setup-banner__icon {
    color: var(--app-accent) !important;
}

.setup-banner__text {
    font-size: var(--lumo-font-size-xs) !important;
    font-weight: 500;
    color: var(--lumo-body-text-color);
}

.setup-banner__button {
    --vaadin-button-height: 26px;
    font-size: var(--lumo-font-size-xs) !important;
    background: var(--app-accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
}

.setup-banner__button vaadin-icon {
    color: #fff;
}

@media (max-width: 600px) {
    .setup-banner__text {
        display: none !important;
    }
    .setup-banner__icon {
        display: none !important;
    }
}

/* User menu trigger in header */
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    border-radius: var(--lumo-border-radius-m);
    cursor: pointer;
    color: var(--app-header-fg);
    transition: background 0.15s ease;
    flex-shrink: 0;
    outline: none;
}

.user-menu-trigger:hover,
.user-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.user-menu-trigger .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-menu-trigger .user-avatar vaadin-icon {
    color: var(--app-header-fg);
}

.user-menu-name {
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--app-header-fg);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-caret {
    color: var(--app-header-fg);
    opacity: 0.8;
}

/* Logout item gets a subtle danger tint */
.user-menu-logout {
    color: var(--app-danger);
}

.user-menu-logout vaadin-icon {
    color: var(--app-danger);
}

/* Hide username on small screens, keep avatar + caret */
@media (max-width: 600px) {
    .user-menu-name {
        display: none;
    }
}

/* Fluffier, rounder dropdown (ContextMenu / MenuBar overlay) */
vaadin-context-menu-overlay::part(overlay),
vaadin-menu-bar-overlay::part(overlay) {
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--lumo-contrast-10pct);
}

vaadin-context-menu-overlay::part(content),
vaadin-menu-bar-overlay::part(content) {
    padding: 6px;
}

vaadin-context-menu-list-box,
vaadin-menu-bar-list-box {
    padding: 0 !important;
}

vaadin-context-menu-item,
vaadin-menu-bar-item {
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin: 2px 0 !important;
    min-height: 40px !important;
    transition: background 0.12s ease !important;
    cursor: pointer;
}

/* Kill Lumo's default focus-ring border that looks like a hard box */
vaadin-context-menu-item[focused],
vaadin-menu-bar-item[focused],
vaadin-context-menu-item[focus-ring],
vaadin-menu-bar-item[focus-ring] {
    box-shadow: none !important;
    outline: none !important;
}

vaadin-context-menu-item:hover,
vaadin-menu-bar-item:hover,
vaadin-context-menu-item[focused],
vaadin-menu-bar-item[focused] {
    background: var(--app-accent-soft) !important;
}

/* Separator line inside the overlay — slimmer, tighter margins */
vaadin-context-menu-item[role="separator"],
vaadin-menu-bar-item[role="separator"] {
    margin: 4px 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: 1px;
    background: var(--lumo-contrast-10pct);
}

html[theme~="dark"] vaadin-context-menu-overlay::part(overlay),
html[theme~="dark"] vaadin-menu-bar-overlay::part(overlay) {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Subtle floating shopping icons in header — decorative, low opacity */
#header::before,
#header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#header::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4H4v2h16V4zm1 10v-2l-1-5H4l-1 5v2h1v6h10v-6h4v6h2v-6h1zm-9 4H6v-4h6v4z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9zM12 4.15L6.04 7.5 12 10.85l5.96-3.35L12 4.15zM5 15.91l6 3.38v-6.71L5 9.21v6.7zm14 0v-6.7l-6 3.37v6.71l6-3.38z'/%3E%3C/svg%3E");
    background-size: 18px, 16px, 16px, 16px;
    background-position: 18% 50%, 38% 50%, 58% 50%, 78% 50%;
    background-repeat: no-repeat;
    animation: floatIcons1 18s ease-in-out infinite;
    opacity: 0.14;
}

#header::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2 4h2v16H2V4zm4 0h1v16H6V4zm3 0h2v16H9V4zm4 0h1v16h-1V4zm3 0h2v16h-2V4zm4 0h2v16h-2V4z'/%3E%3C/svg%3E");
    background-size: 16px, 18px, 16px;
    background-position: 28% 50%, 50% 50%, 70% 50%;
    background-repeat: no-repeat;
    animation: floatIcons2 22s ease-in-out infinite;
    animation-delay: -8s;
    opacity: 0.12;
}

@keyframes floatIcons1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-2px) translateX(6px); }
    66% { transform: translateY(2px) translateX(10px); }
}

@keyframes floatIcons2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-3px) translateX(-8px); }
}

/* Dark mode: bump floating-icon visibility slightly on the darker header bg */
html[theme~="dark"] #header::before {
    opacity: 0.18;
}
html[theme~="dark"] #header::after {
    opacity: 0.15;
}

@media (max-width: 600px) {
    #header::before,
    #header::after {
        display: none !important;
    }
}

#header img {
    border-radius: 50%;
    height: var(--lumo-size-s);
    margin-left: auto;
    margin-right: var(--lumo-space-m);
    overflow: hidden;
    background-color: var(--lumo-contrast);
}

#header h1 {
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    margin: 0;
}

/* Header buttons — always white text on the colored header */
#header vaadin-button {
    color: var(--app-header-fg) !important;
    --lumo-contrast-60pct: var(--app-header-fg);
    --lumo-primary-text-color: var(--app-header-fg);
    background: transparent !important;
}

#header vaadin-button::part(label) {
    color: var(--app-header-fg) !important;
}

#header vaadin-button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

#header vaadin-button vaadin-icon,
#header vaadin-button [slot="prefix"] {
    color: var(--app-header-fg) !important;
}

.v-status-message {
    display: none !important;
}

.containsOwnProduct {
    background-color: var(--app-pink-soft);
}

/* ==================== DRAWER / SIDEBAR ==================== */
#logo {
    box-sizing: border-box;
    box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    height: 64px;
    background-image: url("/images/logo.png");
    background-repeat: no-repeat;
    background-position: center left var(--lumo-space-m);
    background-size: auto 40px;
}

html[theme~="dark"] #logo,
[theme~="dark"] #logo {
    background-image: url("/images/logo_weiss.png");
}

/* Navigation items — style the row part only so nested children don't inherit
 * the highlight background of the parent. */
vaadin-side-nav-item {
    font-size: var(--lumo-font-size-s);
    font-weight: 400;
    color: var(--lumo-body-text-color);
}

vaadin-side-nav-item::part(item) {
    border-radius: var(--lumo-border-radius-m);
    transition: background-color 0.12s ease;
}

vaadin-side-nav-item::part(item):hover {
    cursor: pointer;
    background-color: var(--lumo-contrast-5pct);
}

vaadin-side-nav-item[current]::part(item) {
    font-weight: 600;
    background-color: var(--app-accent-soft);
    color: var(--lumo-primary-color);
}

vaadin-side-nav-item > [slot="prefix"] {
    font-size: var(--lumo-font-size-s);
    font-weight: 400;
}

vaadin-side-nav-item[current] > [slot="prefix"] {
    color: var(--lumo-primary-color);
}

/* Drawer toggle button */
vaadin-drawer-toggle {
    color: var(--app-header-fg);
}

/* Fix unnecessary scroll in main content area */
html, body {
    overflow: hidden !important;
    height: 100vh !important;
    margin: 0;
    padding: 0;
}

vaadin-app-layout {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

vaadin-app-layout::part(content) {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 53px); /* Header height */
}

/* Dashboard specific - fill full height without gap */
#dashboard-view {
    min-height: calc(100vh - 53px) !important;
    box-sizing: border-box;
}

/* Activity row grid should stretch cards to fill remaining space */
#dashboard-activity-row {
    min-height: 280px;
}

/* Dashboard activity rows — leichte Liste: dünne Trenner statt gefüllter Boxen */
.dashboard-activity-row:not(:last-child) {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}
/* Laufende Zeile ist ein abgerundetes Highlight — kein Trenner darunter */
.dashboard-activity-row.is-running {
    border-bottom-color: transparent;
}
.dashboard-activity-row:hover {
    background: var(--lumo-contrast-5pct) !important;
}

/* Pulsing dot for running jobs — overlay bottom-right of the icon bubble */
.dashboard-pulse-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--lumo-base-color);
    animation: dashboardPulse 1.6s ease-out infinite;
}

@keyframes dashboardPulse {
    0% {
        box-shadow: 0 0 0 0 var(--app-success-soft);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Status pill for running job — subtle shimmer */
.dashboard-status-running {
    position: relative;
    overflow: hidden;
}

.dashboard-status-running::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: dashboardShimmer 2.2s ease-in-out infinite;
}

html[theme~="dark"] .dashboard-status-running::after,
[theme~="dark"] .dashboard-status-running::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%
    );
}

@keyframes dashboardShimmer {
    0% { transform: translateX(-100%); }
    60% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Skeleton loader — used while dashboard data loads asynchronously */
.dashboard-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--lumo-contrast-10pct);
}

.dashboard-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: dashboardShimmer 1.6s ease-in-out infinite;
}

html[theme~="dark"] .dashboard-skeleton::after,
[theme~="dark"] .dashboard-skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
}

/* Custom scrollbar for activity list */
.dashboard-activity-list::-webkit-scrollbar {
    width: 6px;
}
.dashboard-activity-list::-webkit-scrollbar-thumb {
    background: var(--lumo-contrast-20pct);
    border-radius: 3px;
}
.dashboard-activity-list::-webkit-scrollbar-thumb:hover {
    background: var(--lumo-contrast-30pct);
}

/* ==================== TYPOGRAPHY ==================== */
h1 {
    font-weight: 600;
}

h3 {
    font-weight: 500;
}

h4 {
    font-weight: 400;
}

h5 {
    font-weight: 300;
}


/* Vaadin 25: Hide the default connection indicator completely - we use our own preloader overlay */
vaadin-connection-indicator,
vaadin-connection-indicator .v-loading-indicator,
vaadin-connection-indicator .v-status-message {
    display: none !important;
}

/* Custom preloader overlay - uses popover="manual" for top-layer rendering (above Vaadin dialogs) */
#custom-preloader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: auto;
    animation: fadein 0.3s ease-out normal 1 both;
}

#custom-preloader::before {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: url("preloader.gif");
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, .6);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

vaadin-button {
    cursor: pointer !important;
}

/* Modernes Lade-Icon */

.spinner {
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ==================== CARDS ==================== */
.card {
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--app-card-shadow);
    padding: var(--lumo-space-m);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
    border-color: var(--lumo-contrast-20pct);
}

.card-header {
    font-weight: 600;
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-header-text-color);
    margin-bottom: var(--lumo-space-s);
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
}

.card-content {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

/* Stat card with large number */
.stat-card .stat-value {
    font-size: var(--lumo-font-size-xxl);
    font-weight: 700;
    color: var(--lumo-primary-color);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    margin-top: var(--lumo-space-xs);
}

/* ==================== VIEW CONTAINERS ==================== */
.view-container {
    padding: var(--lumo-space-l);
    max-width: 1600px;
    margin: 0 auto;
}

.view-header {
    margin-bottom: var(--lumo-space-l);
}

.view-header h1 {
    font-size: var(--lumo-font-size-xxl);
    margin: 0 0 var(--lumo-space-xs) 0;
    color: var(--lumo-header-text-color);
}

.view-header .subtitle {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
}

/* ==================== GRID LAYOUTS ==================== */
.grid-container {
    display: grid;
    gap: var(--lumo-space-m);
}

.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ==================== BUTTONS ==================== */
vaadin-button {
    border-radius: 10px !important;
    cursor: pointer !important;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

vaadin-button:active {
    transform: translateY(1px);
}

vaadin-button[theme~="primary"] {
    background: linear-gradient(135deg, var(--lumo-primary-color) 0%, var(--app-primary-end) 100%) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

vaadin-button[theme~="primary"]:hover {
    background: linear-gradient(135deg, var(--app-primary-hover-start) 0%, var(--lumo-primary-color) 100%) !important;
    box-shadow: 0 4px 10px rgba(21, 119, 155, 0.25);
}

/* Tertiary / icon-only buttons lose the default bg so hover tint reads cleanly */
vaadin-button[theme~="tertiary"]:hover {
    background: var(--lumo-contrast-5pct) !important;
}

.btn-icon-only {
    min-width: var(--lumo-size-m);
    padding: 0;
}

/* ==================== INPUT FIELDS ==================== */
vaadin-text-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-integer-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-select::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-time-picker::part(input-field),
vaadin-date-time-picker::part(input-field),
vaadin-multi-select-combo-box::part(input-field) {
    border-radius: 10px;
}

/* Dropdown overlays */
vaadin-select-overlay::part(overlay),
vaadin-combo-box-overlay::part(overlay),
vaadin-multi-select-combo-box-overlay::part(overlay),
vaadin-date-picker-overlay::part(overlay),
vaadin-time-picker-overlay::part(overlay) {
    border-radius: 10px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .grid-4-cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .grid-3-cols,
    .grid-4-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .view-container {
        padding: var(--lumo-space-m);
    }
}

@media (max-width: 600px) {
    .grid-2-cols,
    .grid-3-cols,
    .grid-4-cols,
    .grid-auto-fit {
        grid-template-columns: 1fr;
    }

    .view-container {
        padding: var(--lumo-space-s);
    }

    .view-header h1 {
        font-size: var(--lumo-font-size-xl);
    }

    #header {
        padding: 0 var(--lumo-space-xs);
    }

    /* Hide button labels on mobile, show only icons */
    #header vaadin-button::part(label) {
        display: none;
    }

    /* Make language select smaller on mobile */
    #header vaadin-select {
        width: 55px !important;
        --vaadin-select-text-field-width: 55px;
    }

    /* Compact button spacing on mobile */
    #header vaadin-button {
        padding: 0 var(--lumo-space-xs);
        min-width: auto;
    }

    /* Right section compact on mobile */
    #header .header-right-section {
        gap: var(--lumo-space-xs) !important;
    }

    /* Dialogs go full-screen on mobile for breathing room */
    vaadin-dialog-overlay::part(overlay) {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    vaadin-dialog-overlay::part(content) {
        max-width: 100vw !important;
    }

    /* Form fields go full-width */
    vaadin-text-field,
    vaadin-password-field,
    vaadin-email-field,
    vaadin-number-field,
    vaadin-integer-field,
    vaadin-text-area,
    vaadin-select,
    vaadin-combo-box,
    vaadin-date-picker,
    vaadin-time-picker,
    vaadin-date-time-picker,
    vaadin-multi-select-combo-box {
        width: 100% !important;
    }
}

/* Touch targets — minimum 40px tap area on coarse pointers */
@media (pointer: coarse) {
    vaadin-button {
        min-height: 40px;
    }
}

/* ==================== FORMS ==================== */
.form-section {
    background: var(--app-card-bg);
    border: 1px solid var(--app-card-border);
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
    box-shadow: var(--app-card-shadow);
}

.form-section-title {
    font-weight: 600;
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-header-text-color);
    margin-bottom: var(--lumo-space-m);
    padding-bottom: var(--lumo-space-s);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

/* ==================== STATUS BADGES ==================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    border-radius: var(--lumo-border-radius-m);
    font-size: var(--lumo-font-size-xs);
    font-weight: 500;
}

.badge-success {
    background: var(--app-success-soft);
    color: var(--app-success);
}

.badge-warning {
    background: var(--app-warning-soft);
    color: var(--app-warning);
}

.badge-error {
    background: var(--app-danger-soft);
    color: var(--app-danger);
}

.badge-info {
    background: var(--app-accent-soft);
    color: var(--lumo-primary-color);
}

/* ==================== DIALOGS ==================== */
vaadin-dialog-overlay::part(overlay) {
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

vaadin-dialog-overlay::part(content) {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* Dialog content scrollable area */
.dialog-content {
    padding: var(--lumo-space-m);
    overflow-y: auto;
    flex: 1;
}

/* Dialog sections */
.dialog-section {
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    border: 1px solid var(--lumo-contrast-10pct);
    margin-bottom: var(--lumo-space-m);
    overflow: hidden;
}

.dialog-section-header {
    background: var(--lumo-contrast-5pct);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    display: flex;
    align-items: center;
    gap: var(--lumo-space-s);
}

.dialog-section-header vaadin-icon {
    color: var(--lumo-primary-color);
}

.dialog-section-title {
    font-weight: 600;
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-header-text-color);
}

.dialog-section-content {
    padding: var(--lumo-space-m);
}

/* ==================== ORDER VIEW SPECIFIC ==================== */
#orders-view {
    background: var(--lumo-contrast-5pct);
}

#orders-view .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

#orders-view vaadin-grid {
    border-radius: var(--lumo-border-radius-m);
    border: 1px solid var(--lumo-contrast-10pct);
}

/* Grids mit Doppelklick-Aktion: Pointer-Cursor nur auf den Body-Zeilen (nicht im Header),
   damit klar ist, dass die Zeile anklickbar/doppelklickbar ist. */
vaadin-grid.clickable-rows::part(body-cell) {
    cursor: pointer;
}

/* Radio button group styling for filters */
vaadin-radio-group[theme~="horizontal"] {
    gap: var(--lumo-space-m);
}

vaadin-radio-group[theme~="horizontal"] vaadin-radio-button {
    margin: 0;
}

/* ==================== CONFIRM DIALOGS ==================== */
vaadin-confirm-dialog-overlay::part(overlay) {
    border-radius: var(--lumo-border-radius-l);
    min-width: 400px;
    max-width: min(90vw, 500px);
    overflow: hidden;
}

vaadin-confirm-dialog-overlay::part(content) {
    overflow: hidden !important;
    max-height: none;
}

vaadin-confirm-dialog-overlay [slot="header"],
vaadin-confirm-dialog::part(header) {
    padding: var(--lumo-space-m);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

vaadin-confirm-dialog-overlay [slot="message"],
vaadin-confirm-dialog::part(message) {
    padding: var(--lumo-space-m);
    overflow: hidden !important;
    overflow-y: hidden !important;
}

vaadin-confirm-dialog-overlay [slot="footer"],
vaadin-confirm-dialog::part(footer) {
    padding: var(--lumo-space-s) var(--lumo-space-m);
    border-top: 1px solid var(--lumo-contrast-10pct);
    gap: var(--lumo-space-s);
}

/* Prevent scrollbar in confirm dialog's internal vaadin-dialog */
vaadin-confirm-dialog-overlay vaadin-dialog-overlay::part(content) {
    overflow: hidden !important;
    max-height: none !important;
}

/* ==================== RESPONSIVE TABLES ==================== */
@media (max-width: 768px) {
    /* Make grids horizontally scrollable on mobile */
    vaadin-grid {
        font-size: var(--lumo-font-size-s);
    }

    /* Compact buttons in grid on mobile */
    vaadin-grid vaadin-button {
        min-width: auto;
        padding: var(--lumo-space-xs);
    }
}

/* ==================== DIRTY STATE ANIMATION ==================== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 152, 175, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(13, 152, 175, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(13, 152, 175, 0);
    }
}

/* ==================== TYPING INDICATOR ANIMATION ==================== */
@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@keyframes flash {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(14, 165, 233, 0.15);
    }
}

/* ========== Help FAB ========== */
.help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    min-width: 48px !important;
    padding: 0 !important;
    background: var(--app-header-bg) !important;
    color: var(--app-header-fg) !important;
    box-shadow: 0 4px 12px rgba(21, 119, 155, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.help-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(21, 119, 155, 0.5) !important;
}
@media (max-width: 600px) {
    .help-fab {
        width: 44px;
        height: 44px;
        min-width: 44px !important;
        bottom: 16px;
        right: 16px;
    }
}

/* ========== Help Content ========== */
.help-content h1 {
    font-size: var(--lumo-font-size-xxl);
    font-weight: 700;
    margin: 0 0 var(--lumo-space-xs) 0;
    color: var(--lumo-header-text-color);
}
.help-content .help-intro {
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-secondary-text-color);
    margin: 0 0 var(--lumo-space-l) 0;
    line-height: 1.6;
}
.help-content h2 {
    font-size: var(--lumo-font-size-xl);
    font-weight: 600;
    margin: var(--lumo-space-l) 0 var(--lumo-space-s) 0;
    color: var(--lumo-header-text-color);
}
.help-content h3 {
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    margin: var(--lumo-space-m) 0 var(--lumo-space-xs) 0;
    color: var(--lumo-header-text-color);
}
.help-content p {
    line-height: 1.6;
    margin: 0 0 var(--lumo-space-s) 0;
}
.help-content ul, .help-content ol {
    padding-left: var(--lumo-space-l);
    margin: 0 0 var(--lumo-space-s) 0;
}
.help-content li {
    line-height: 1.6;
    margin-bottom: var(--lumo-space-xs);
}
.help-content code {
    background: var(--lumo-contrast-10pct);
    padding: 2px 6px;
    border-radius: var(--lumo-border-radius-s);
    font-family: monospace;
    font-size: var(--lumo-font-size-s);
}
.help-content pre {
    background: var(--lumo-contrast-5pct);
    padding: var(--lumo-space-m);
    border-radius: var(--lumo-border-radius-m);
    overflow-x: auto;
    margin: 0 0 var(--lumo-space-m) 0;
}
.help-content pre code {
    background: none;
    padding: 0;
}
.help-content a {
    color: var(--app-accent);
    text-decoration: none;
}
.help-content a:hover {
    text-decoration: underline;
}
.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--lumo-space-m) 0;
    font-size: var(--lumo-font-size-s);
}
.help-content th, .help-content td {
    border: 1px solid var(--lumo-contrast-10pct);
    padding: var(--lumo-space-xs) var(--lumo-space-s);
    text-align: left;
}
.help-content th {
    background: var(--lumo-contrast-5pct);
    font-weight: 600;
}
/* Tip box */
.help-content .tip-box {
    background: var(--app-accent-soft);
    border-left: 4px solid var(--app-accent);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 12px 0;
    line-height: 1.6;
}
.help-content .tip-box strong {
    color: var(--app-accent);
}
/* Warning box */
.help-content .warning-box {
    background: var(--app-warning-soft);
    border-left: 4px solid var(--app-warning);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 12px 0;
    line-height: 1.6;
}
.help-content .warning-box strong {
    color: var(--app-warning);
}
/* Step header with numbered circle */
.help-content .step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--lumo-space-l) 0 var(--lumo-space-s) 0;
}
.help-content .step-number {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--app-header-bg);
    color: var(--app-header-fg);
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.help-content .step-header h2 {
    margin: 0;
}
/* Info card */
.help-content .info-card {
    background: var(--lumo-contrast-5pct);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-l);
    padding: 16px;
    margin: 12px 0;
}
.help-content .info-card h4 {
    margin: 0 0 8px 0;
    font-size: var(--lumo-font-size-m);
    font-weight: 600;
}
/* Keyboard / badge style for field names */
.help-content .field-badge {
    display: inline-block;
    background: var(--lumo-contrast-10pct);
    padding: 1px 8px;
    border-radius: var(--lumo-border-radius-s);
    font-weight: 600;
    font-size: var(--lumo-font-size-s);
    font-family: monospace;
}
/* Required badge */
.help-content .required {
    display: inline-block;
    background: var(--app-danger-soft);
    color: var(--app-danger);
    padding: 1px 6px;
    border-radius: var(--lumo-border-radius-s);
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
}
.help-content .recommended {
    display: inline-block;
    background: var(--app-warning-soft);
    color: var(--app-warning);
    padding: 1px 6px;
    border-radius: var(--lumo-border-radius-s);
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
}
.help-content .optional {
    display: inline-block;
    background: var(--lumo-contrast-10pct);
    color: var(--lumo-secondary-text-color);
    padding: 1px 6px;
    border-radius: var(--lumo-border-radius-s);
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
}

/* ==================== CKEDITOR TOOLTIPS ==================== */
/* Ensure CKEditor tooltips are visible above Vaadin dialogs */
.ck.ck-balloon-panel,
.ck.ck-tooltip {
    z-index: 10000 !important;
}

/* ==================== COMPONENT & VIEW IMPORTS ====================
 * CSS @import-Statements müssen am Anfang der Datei stehen — siehe oben.
 * Sonst werden sie vom Browser ignoriert.
 */