/* Wesvic look & feel on top of the Radzen standard / standard-dark themes.
   The header stays Wesvic blue in both light and dark mode; its text and icons are always white. */
:root {
    --wesvic-blue: #0069AA;
    --wesvic-blue-dark: #00507f;
    --wesvic-header-background: var(--wesvic-blue);
    --wesvic-header-color: #fff;
    --rz-header-background-color: var(--wesvic-header-background);
    --rz-header-color: var(--wesvic-header-color);
}

html, body {
    background-color: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

.wesvic-header,
.wesvic-header.rz-header {
    background-color: var(--wesvic-header-background) !important;
    color: var(--wesvic-header-color) !important;
}

.wesvic-header .rz-label,
.wesvic-header .rz-link,
.wesvic-header .rz-link-text,
.wesvic-header .rz-sidebar-toggle,
.wesvic-header .rz-sidebar-toggle .rzi,
.wesvic-header .rz-icon,
.wesvic-header .rzi,
.wesvic-header a {
    color: var(--wesvic-header-color) !important;
}

/* Header buttons (sync, theme toggle, sidebar toggle): transparent with white icon in every state
   (Radzen would otherwise paint text-variant icons with --rz-primary, i.e. blue on blue). */
.wesvic-header .wesvic-header-button .rz-button,
.wesvic-header .rz-button.wesvic-header-button,
.wesvic-header .rz-sidebar-toggle {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wesvic-header-color) !important;
}

.wesvic-header .wesvic-header-button .rz-button:hover,
.wesvic-header .rz-button.wesvic-header-button:hover,
.wesvic-header .rz-sidebar-toggle:hover,
.wesvic-header .wesvic-header-button .rz-button:focus-visible,
.wesvic-header .rz-button.wesvic-header-button:focus-visible {
    background: rgba(255, 255, 255, .18) !important;
}

.wesvic-header .wesvic-header-button .rz-button *,
.wesvic-header .rz-button.wesvic-header-button * {
    color: var(--wesvic-header-color) !important;
}

.wesvic-header .rz-button:focus-visible {
    outline: 2px solid var(--wesvic-header-color);
    outline-offset: 1px;
}

.wesvic-header .wesvic-header-title,
.wesvic-header .rz-text-h5 {
    color: var(--wesvic-header-color) !important;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark mode: Bootstrap-based dashboard widgets follow data-bs-theme; Radzen follows standard-dark. */
html.wesvic-dark .card {
    background-color: var(--rz-base-800, var(--bs-card-bg));
}

/* Wesvic PieceCounter logo in the header (same as the webapp: max 40px high). */
.wesvic-header .wesvic-logo {
    max-height: 40px;
    display: block;
}

.wesvic-header .wesvic-header-user {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

/* Sync button: spin the icon while a sync runs. */
@keyframes wesvic-spin {
    to { transform: rotate(360deg); }
}

.wesvic-sync-button.wesvic-syncing .rz-button-icon-left,
.wesvic-sync-button.wesvic-syncing .rzi {
    display: inline-block;
    animation: wesvic-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .wesvic-sync-button.wesvic-syncing .rz-button-icon-left,
    .wesvic-sync-button.wesvic-syncing .rzi {
        animation: none;
        opacity: .6;
    }
}