@import "theme-editor.css";

html {
    --lumo-primary-color: #15779b;
    --lumo-primary-color-50pct: rgba(21, 119, 155, 0.5);
    --lumo-primary-text-color: #15779b;
}

/* ==================== HEADER ==================== */
#header {
    height: var(--lumo-size-xl);
    background: linear-gradient(90deg, #15779b 0%, #11607d 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Shopping icons floating in header */
#header::before,
#header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#header::before {
    /* Cart, Bag, Basket, Warehouse, 3D Parcel */
    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='M22 9h-4.79l-4.38-6.56c-.19-.28-.51-.42-.83-.42s-.64.14-.83.43L6.79 9H2c-.55 0-1 .45-1 1 0 .09.01.18.04.27l2.54 9.27c.23.84 1 1.46 1.92 1.46h13c.92 0 1.69-.62 1.93-1.46l2.54-9.27L23 10c0-.55-.45-1-1-1zM12 4.8L14.8 9H9.2L12 4.8zM18.5 19l-12.99.01L3.31 11H20.7l-2.2 8z'/%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: 24px 24px, 20px 20px, 22px 22px, 18px 18px, 20px 20px;
    background-position: 12% 45%, 28% 60%, 44% 35%, 60% 55%, 76% 45%;
    background-repeat: no-repeat;
    animation: floatIcons1 15s ease-in-out infinite;
    opacity: 0.18;
}

#header::after {
    /* Tag, Package, Truck, Receipt, Barcode */
    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 2H4c-1.1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-.9-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z'/%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='M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z'/%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: 18px 18px, 22px 22px, 26px 26px, 16px 16px, 20px 20px;
    background-position: 20% 55%, 36% 40%, 52% 50%, 68% 35%, 84% 55%;
    background-repeat: no-repeat;
    animation: floatIcons2 12s ease-in-out infinite;
    animation-delay: -6s;
    opacity: 0.15;
}

@keyframes floatIcons1 {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-4px) translateX(8px);
    }
    50% {
        transform: translateY(3px) translateX(15px);
    }
    75% {
        transform: translateY(-2px) translateX(8px);
    }
}

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

#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 h2 {
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Header buttons - force white color */
#header vaadin-button {
    color: #ffffff !important;
    --lumo-contrast-60pct: #ffffff;
    --lumo-primary-text-color: #ffffff;
    background: transparent !important;
}

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

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

#header vaadin-button vaadin-icon,
#header vaadin-button [slot="prefix"] {
    color: #ffffff !important;
}

/* Header anchor links (Help) */
#header a {
    color: #ffffff !important;
    text-decoration: none;
}

#header a:hover {
    background: rgba(255, 255, 255, 0.2);
}

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

.containsOwnProduct {
    background-color: pink;
}

/* ==================== 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);
}

#logo img {
    height: calc(var(--lumo-size-s) * 1.5);
}

/* Navigation items - keep original size, just improve colors */
vaadin-side-nav-item {
    font-size: var(--lumo-font-size-s);
    font-weight: 400;
    color: var(--lumo-body-text-color);
}

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

vaadin-side-nav-item[current] {
    font-weight: 600;
    background-color: rgba(21, 119, 155, 0.1);
    color: var(--lumo-primary-color);
    border-radius: var(--lumo-border-radius-m);
}

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: #ffffff;
}

/* 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;
}

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

h3 {
    font-weight: 500;
}

h4 {
    font-weight: 400;
}

h5 {
    font-weight: 300;
}


.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.4s ease-out 0.3s normal 1 both;
    z-index: 2147483647;
}

.v-loading-indicator: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); /* Darkens the UI */
    }
}

@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-dialog-overlay::part(content) {
    padding: 0px !important;
}

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: #ffffff;
    border-radius: var(--lumo-border-radius-l);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: var(--lumo-space-m);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.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: 20px !important;
    cursor: pointer !important;
}

vaadin-button[theme~="primary"] {
    background: linear-gradient(135deg, #15779b 0%, #11607d 100%) !important;
    border-radius: 20px !important;
}

vaadin-button[theme~="primary"]:hover {
    background: linear-gradient(135deg, #1a8cb8 0%, #15779b 100%) !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: 12px;
}

/* 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: 12px;
}

/* ==================== 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 floating icons on mobile */
    #header::before,
    #header::after {
        display: none !important;
    }

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

    /* Hide environment indicator (H2) on mobile */
    #header h2 {
        display: none !important;
    }

    /* Hide help link completely on mobile */
    #header a.header-help-link {
        display: none !important;
    }

    /* 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;
    }
}

/* ==================== FORMS ==================== */
.form-section {
    background: #ffffff;
    border-radius: var(--lumo-border-radius-l);
    padding: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.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: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.badge-warning {
    background: rgba(241, 196, 15, 0.15);
    color: #f39c12;
}

.badge-error {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.badge-info {
    background: rgba(21, 119, 155, 0.15);
    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);
}

/* 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);
}

vaadin-confirm-dialog::part(header) {
    padding: var(--lumo-space-m);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

vaadin-confirm-dialog::part(message) {
    padding: var(--lumo-space-m);
}

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);
}

/* ==================== 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);
    }
}