@import "theme-editor.css";
@import url('./main-layout.css');
@import url('./views/card-view.css');
@import url('./views/dashboard-view.css');
@import url('./views/sections-view.css');
@import url('./views/batches-view.css');
@import url('./views/items-view.css');
@import url('./views/users-view.css');
@import url('./views/satoshi.css');
@import url('./views/notification-styles.css');
@import url('./starpass/main.css');

@import url('./bootstrap/bootstrap.min.css');
@import url('./bootstrap/bootstrap-theme-compatibility.css');
@import url('./bootstrap/bootstrap-custom.css');


html {
        --bs-body-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --bs-font-sans-serif: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --lumo-icons-dropdown:url(/icons/arrow-drop-down-big-svgrepo-com.svg);
    }

    [theme~="dark"] {
        --grad1: linear-gradient(to bottom right, hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 3%)) 20%, hsl(var(--base-h) var(--base-s) calc(var(--base-l) + 0%)) 50%, hsl(calc(var(--base-h) - 10) calc(var(--base-s)* 1.2) var(--base-l)) 100%);
        --grad2: radial-gradient(50% 80% at 25% 70%, hsl(calc(var(--base-h) - 10) calc(var(--base-s)* 1.5) calc(var(--base-l) + 10%) / .4) 0%, transparent 100%);
        --grad3: radial-gradient(83% 132% at 76% 20%, transparent 84%, hsl(var(--base-h) var(--base-s) calc(var(--base-l) - 6%) / .8) 100%);
        --bg: linear-gradient(56deg,var(--lumo-base-color) 39%, var(--lumo-base-color) 80%, var(--lumo-primary-color) 100%);
        --bg: var(--grad3), var(--grad2), var(--grad1), hsl(var(--base-h) var(--base-s) var(--base-l));

        background: var(--bg);

        --bs-body-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --bs-font-sans-serif: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --lumo-font-family: Satoshi, system-ui, ui-sans-serif, sans-serif;
        --lumo-icons-dropdown:url(/icons/arrow-drop-down-big-svgrepo-com.svg);
    }

    [theme~="xxlarge"] {
        --vaadin-avatar-size: 100px;
    }

    [theme~="xxxlarge"] {
            --vaadin-avatar-size: 150px;
        }

        [theme~="xxxxlarge"] {
                    --vaadin-avatar-size: 200px;
                }


.myborderstyle bs-column {
        margin: 5px;
        border-radius: var(--lumo-border-radius-l);
        padding-top: 5px;


}


vaadin-login-overlay-wrapper::part(card){
	width: calc(var(--lumo-size-m) * 15);
}

vaadin-grid::part(high-rating) {
    background-color: var(--lumo-success-color-10pct);
}

vaadin-grid::part(low-rating) {
    background-color: var(--lumo-error-color-10pct);
}

vaadin-grid::part(font-weight-bold) {
    font-weight: bold;
}


.grid-web-column vaadin-grid-cell-content {
    display: table-cell;
}
.grid-card-column vaadin-grid-cell-content {
    display: none;
}
@media (min-width: 600px) {
    .grid-web-column vaadin-grid-cell-content {
            display: table-cell;
        }
        .grid-card-column vaadin-grid-cell-content {
            display: none;
        }
}
@media (max-width: 599px) {
    .grid-web-column vaadin-grid-cell-content {
            display: none;
        }
        .grid-card-column vaadin-grid-cell-content {
            display: table-cell;
        }
}

.mycontent {
    border-style: solid;
    border-width: min(1vmax, 1px);
    border-color: var(--lumo-contrast-10pct) var(--lumo-contrast-10pct) var(--lumo-contrast-20pct);
    margin: 1vmax;
    background-clip: padding-box;
    border-radius: clamp(0px, 1vmax* 3, calc(var(--lumo-border-radius-l) + 1px));
    box-shadow: 0 1px 1px 0 var(--lumo-shade-10pct);
    max-width: calc(100% - 1vmax* 2);
    max-height: calc(100% - 1vmax* 2);
    height: 100%;
    width: 100%;
    overflow: auto;
    box-sizing: border-box;
}

vaadin-app-layout::part(drawer) {
    border-inline-end: none;
}

.date-range-picker-button {
    border-radius: var(--lumo-border-radius-m);
}

#blinking-button{
    padding: 8px 8px;
    border-radius: 100px;
    min-width: min-content;
    height: 8px;
}
@keyframes blink {
  0%, 100% {background-color:red;}
  50% {background-color: white;}
}
#blinking-button {
  background-color: #8EDDBE;
  color: white;
  animation: blink 1s linear infinite;
}




.my-cart-base{
    width: 100%;
    background:var(--lumo-primary-color-10pct);
    border-radius:5px;
    margin: 0px;
    --vaadin-grid-cell-background: var(--lumo-primary-color-10pct);
}

#label {
    color: var(--lumo-secondary-text-color) !important;
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-s);
    font-weight: 1000;
    margin-top: var(--lumo-space-m);
    margin-left: calc(var(--lumo-border-radius-m) / 4);
    margin-bottom: var(--lumo-space-xs);
    transition: color 0.4s;
    line-height: 1.333;
}

vaadin-grid.no-padding-grid::part(body-cell) {
    padding: 0px;
}

vaadin-grid::part(parent-account) {
    font-weight: bold;
}

vaadin-grid::part(child-account) {
    font-weight: normal;
}
.inline-tab-filter {
    margin-left: auto;
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-m);
    height: 40px;
    padding: 0 0.5em;
    box-shadow: inset 0 0 0 1px var(--lumo-contrast-10pct);
}

.my-sliding-panel {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
    0 0 4px rgba(0, 0, 0, 0.06);
    border-radius: 8px 0 0 8px;
    padding-top: 0.5rem;
}


/* in styles.css of via dom element styling */
.gradient-badge {
    background: linear-gradient(135deg, var(--lumo-primary-color), var(--lumo-primary-color-50pct));
    color: white;
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.minimal-badge {
    background-color: var(--lumo-contrast-5pct);
    color: var(--lumo-body-text-color);
    border: 1px solid var(--lumo-contrast-10pct);
    border-radius: 12px;
    padding: 10px 20px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.minimal-badge:hover {
    background-color: var(--lumo-primary-color);
    color: white;
    border-color: var(--lumo-primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}