@import url('css/components.css');
@import url('css/normalize.css');
@import url('css/hi-cloud-2025.css');
@import url('tag-chip.css');
@import url('tag-combo-box.css');
@import url('components/vaadin-dialog-overlay.css');
@import url('components/vaadin-radio-button.css');
@import url('components/vaadin-checkbox.css');

:root {
    --z-3p-dropdown: 150;
    --z-modal-overlay: 1000;
}

/*!* Selected tab text *!*/
vaadin-tab[selected],
vaadin-tabs ::slotted(vaadin-tab[selected]),
vaadin-tab[selected]::part(label) {
    color: #602aff !important;
}

/* Selected tab icon (SVG / iron-icon) */
vaadin-tab[selected] svg,
vaadin-tab[selected] iron-icon {
    fill: #602aff !important;
    color: #602aff !important;
}

/* css */
/* General ::before indicator for vaadin-tab */
vaadin-tab::before,
vaadin-tabs ::slotted(vaadin-tab)::before {
    background: #602aff !important;
    color: #602aff !important;
}

/* Ensure selected state uses the same color */
vaadin-tab[selected]::before,
vaadin-tabs ::slotted(vaadin-tab[selected])::before {
    background: #602aff !important;
    color: #602aff !important;
}


/* Add to frontend/themes/hicloud/styles.css */

vaadin-context-menu-overlay::part(overlay) {
    z-index: 10;
    background-color: #fcfcfc;
    border-radius: 10px;
    flex-direction: column;
    width: 250px;
    height: auto;
    margin-top: 0;
    padding-top: 0;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 0 10px -3px rgba(0, 0, 0, 0.25);
}

vaadin-context-menu-overlay::part(content) {
    padding: 0;
    background-color: #fcfcfc;
}

vaadin-context-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    background-color: transparent;
}

vaadin-context-menu-item:hover {
    background-color: #f0f0f0;
}

vaadin-context-menu-item[focused] {
    background-color: #f0f0f0;
}

/* Keep core 3p dropdown above page widgets/content */
._3p-dropdown {
    position: relative;
    overflow: visible;
}

._3p-content {
    z-index: var(--z-3p-dropdown);
}

._3p-dropdown:has(> ._3p-content.show) {
    z-index: var(--z-3p-dropdown);
}

/* K6-like inline placement: 3p attached to right side of item */
._3p-in-shortcut {
    margin-left: -10px;
    display: block;
    position: relative;
}

.edit-menu-dropdown {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: var(--z-3p-dropdown);
}

@media screen and (max-width: 991px) {
    ._3p-in-shortcut {
        margin-left: -0.5vw;
    }
}

/* Smooth open/close for 3p menu panels */
._3p-content.three-point-menu-content,
._3p-content[data-role="menu-content"] {
    display: none;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

._3p-content.three-point-menu-content.show,
._3p-content[data-role="menu-content"].show {
    display: flex;
    height: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Add to frontend/themes/hicloud/styles.css */

.image-gallery {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.image-gallery::-webkit-scrollbar {
    width: 8px;
}

.image-gallery::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.image-gallery::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.image-gallery::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.image-card {
    animation: fadeIn 0.3s ease-in;
}

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

.image-grid {
    /* Responsive grid */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
}


html {
    /*--lumo-font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    --lumo-border-radius: 0.5em;
    /*--lumo-font-size: 1rem;*/
    /*--lumo-font-size-xxxl: 1.75rem;*/
    /*--lumo-font-size-xxl: 1.375rem;*/
    /*--lumo-font-size-xl: 1.125rem;*/
    /*--lumo-font-size-l: 1rem;*/
    /*--lumo-font-size-m: 0.875rem;*/
    /*--lumo-font-size-s: 0.8125rem;*/
    /*--lumo-font-size-xs: 0.75rem;*/
    /*--lumo-font-size-xxs: 0.6875rem;*/
    --lumo-primary-color-50pct: rgba(96, 42, 255, 0.5);
    --lumo-primary-color-10pct: rgba(96, 42, 255, 0.1);
    --lumo-error-text-color: rgb(255, 56, 103);
    --lumo-error-color-50pct: rgba(255, 56, 103, 0.5);
    --lumo-error-color-10pct: rgba(255, 56, 103, 0.1);
    --lumo-success-text-color: rgb(20, 184, 143);
    --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
    --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);
    --lumo-primary-color: #602aff;
    --lumo-error-color: hsl(346, 100%, 61%);
    --lumo-success-color: hsl(165, 80%, 40%);
    --lumo-header-text-color: hsl(285, 35%, 15%);
    --lumo-body-text-color: hsla(285, 40%, 16%, 0.94);
    --lumo-secondary-text-color: hsla(285, 42%, 18%, 0.72);
    --lumo-tertiary-text-color: hsla(285, 45%, 20%, 0.5);
    --lumo-disabled-text-color: hsla(285, 50%, 22%, 0.26);
    --lumo-primary-text-color: #602aff;
}

[theme~="dark"] {
}


[part="input-field"] {
    box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
    background-color: var(--lumo-base-color);
}

:host([invalid]) [part="input-field"] {
    box-shadow: inset 0 0 0 1px var(--lumo-error-color);
}


vaadin-split-layout > [slot="primary"] {
    position: relative;
}

/*.menu-bar-component-host {*/
/*    position: absolute !important;*/
/*    left: 0 !important;*/
/*    right: auto !important;*/
/*    bottom: 60px !important;*/
/*    width: 100% !important;*/
/*}*/


.card-overlay {
    align-items: center;
    background-color: color-mix(in srgb, #236dc9 15%, transparent);
    border-radius: var(--radius);
    display: none;
    inset: calc(var(--spacing) * 0);
    justify-content: center;
    position: absolute;
    z-index: 10;
}

.ui-async-spinner {
    width: 24px;
    height: 24px;
    display: inline-block;
    box-sizing: border-box;
    border: 3px solid var(--lumo-primary-color-10pct, rgba(96, 42, 255, 0.1));
    border-top-color: var(--lumo-primary-color, #602aff);
    border-radius: 50%;
    animation: uiAsyncSpin 0.8s linear infinite;
}

@keyframes uiAsyncSpin {
    to {
        transform: rotate(360deg);
    }
}