/* Modern professional styling for Sprayer Portal */

/* Global improvements */
:root {
    --lumo-header-text-color: var(--lumo-body-text-color);
}

/* Navigation menu enhancements */
vaadin-app-layout vaadin-drawer-toggle {
    margin-inline-end: var(--lumo-space-s);
}

vaadin-app-layout [slot="drawer"] {
    background: var(--lumo-base-color);
}

/* Make navigation menu items more visually appealing */
vaadin-app-layout nav a[router-link] {
    border-radius: var(--lumo-border-radius-m);
    margin: var(--lumo-space-xs) var(--lumo-space-s);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    transition: all 0.2s ease-in-out;
}

vaadin-app-layout nav a[router-link]:hover {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}

vaadin-app-layout nav a[router-link][highlight] {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--lumo-primary-color);
}

/* Grid styling enhancements */
vaadin-grid {
    border-radius: var(--lumo-border-radius-m);
    box-shadow: var(--lumo-box-shadow-xs);
}

vaadin-grid::part(row):hover {
    background: var(--lumo-primary-color-10pct);
}

vaadin-grid::part(selected-row) {
    background: var(--lumo-primary-color-10pct);
}

vaadin-grid::part(cell) {
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

/* Form styling improvements */
.editor-layout {
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-m);
    box-shadow: var(--lumo-box-shadow-s);
    padding: var(--lumo-space-l);
}

.editor h3 {
    color: var(--lumo-header-text-color);
    margin: 0 0 var(--lumo-space-l) 0;
    font-weight: 600;
    font-size: var(--lumo-font-size-xl);
    border-bottom: 2px solid var(--lumo-contrast-10pct);
    padding-bottom: var(--lumo-space-m);
}

/* Button layout improvements */
.button-layout {
    gap: var(--lumo-space-s);
    padding-top: var(--lumo-space-l);
    border-top: 1px solid var(--lumo-contrast-10pct);
    margin-top: var(--lumo-space-l);
}

/* Toolbar styling */
.grid-wrapper vaadin-horizontal-layout {
    padding: var(--lumo-space-m);
    background: var(--lumo-base-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0 0;
}

/* Split layout improvements */
vaadin-split-layout {
    background: var(--lumo-contrast-5pct);
}

/* Card-like appearance for grid wrapper */
.grid-wrapper {
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-m);
    box-shadow: var(--lumo-box-shadow-xs);
    overflow: hidden;
}

/* Status badge styling */
.status-badge {
    display: inline-block;
    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: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.active {
    background: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

.status-badge.suspended {
    background: var(--lumo-error-color-10pct);
    color: var(--lumo-error-text-color);
}

.status-badge.archived {
    background: var(--lumo-contrast-10pct);
    color: var(--lumo-secondary-text-color);
}

.status-badge.pending {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
}

.status-badge.installed {
    background: var(--lumo-success-color-10pct);
    color: var(--lumo-success-text-color);
}

/* Notification improvements */
vaadin-notification-card {
    box-shadow: var(--lumo-box-shadow-xl);
}

/* Form field spacing */
vaadin-form-layout {
    gap: var(--lumo-space-m);
}

/* Text area improvements */
vaadin-text-area {
    min-height: 100px;
}

/* Improve confirm dialog styling */
vaadin-confirm-dialog-overlay {
    --lumo-border-radius-l: var(--lumo-border-radius-m);
}

/* Add subtle animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.client-view, .site-view, .device-view {
    animation: fadeIn 0.3s ease-in-out;
}

/* Responsive improvements */
@media (max-width: 800px) {
    .editor-layout {
        padding: var(--lumo-space-m);
    }

    vaadin-split-layout {
        flex-direction: column;
    }
}