@import "theme-editor.css";

@import 'styles/components/account-switcher.css';
@import 'styles/components/app-bar.css';
@import 'styles/components/batch-operation-card.css';
@import 'styles/components/brand-expression.css';
@import 'styles/components/charts.css';
@import 'styles/components/details-drawer.css';
@import 'styles/components/floating-action-button.css';
@import 'styles/components/grid.css';
@import 'styles/components/list-item.css';
@import 'styles/components/navi-drawer.css';
@import 'styles/components/navi-item.css';
@import 'styles/components/navi-menu.css';
@import 'styles/components/singleSelector.css';
@import 'styles/components/responsive-button.css';
@import 'styles/components/tab-bar.css';
@import 'styles/components/view-frame.css';
@import 'styles/components/vaadin-text-field.css';
@import 'styles/components/notification-box.css';
@import 'styles/components/footer-bar.css';
@import 'styles/components/kanban-view.css';
@import 'styles/components/card.css';
@import 'styles/components/skeleton.css';
@import 'styles/components/custom-dialog.css';
@import 'styles/components/filter-drawer.css';
@import 'styles/components/minicalendar.css';
@import 'styles/components/theme-toggle-button.css';
@import 'styles/components/dashboard-column.css';
@import 'styles/components/dashboard-row.css';
@import 'styles/components/carousel-content.css';
@import 'styles/components/combo-box.css';
@import 'styles/components/floating-speed-dial.css';

@import 'styles/lumo/border-radius.css';
@import 'styles/lumo/icon-size.css';
@import 'styles/lumo/margin.css';
@import 'styles/lumo/padding.css';
@import 'styles/lumo/shadow.css';
@import 'styles/lumo/spacing.css';
@import 'styles/lumo/typography.css';
@import 'styles/lumo/badge-color.css';

@import 'styles/misc/box-shadow-borders.css';
@import 'styles/misc/delete-button.css';
@import 'styles/misc/recover-button.css';

@import 'styles/views/login.css';
@import 'styles/views/statistics.css';
@import 'styles/views/organizationView.css';
@import 'styles/views/dashboardView.css';
@import 'styles/views/card-window.css';
@import 'styles/views/user-card.css';
@import 'styles/views/customerView.css';
@import 'styles/views/appointments.css';



[theme~="dark"] {
    .app-bar {
      background: linear-gradient(135deg, #233C5F, rgba(0, 50, 130, 0.95));
    }
    .app-bar__title-button > *,
    .app-bar__download,
    .app-bar__navi-icon,
    .app-bar__action-items > * {
      color: hsl(214, 90%, 77%);
    }
    .app-bar__tabs [selected],
    .app-bar__title {
      color: white;
    }
}

:root {
  --app-bar-height: var(--lumo-size-xl);

  --navi-drawer-width: calc(var(--lumo-size-m) * 7);
  --filter-drawer-width: calc(var(--lumo-size-m) * 7);
  --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
  --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

  --details-drawer-width: calc(var(--lumo-size-m) * 11);

  --transition-duration-s: 160ms;
  --transition-duration-m: 240ms;
  --transition-duration-l: 320ms;

  /* Responsive sizing and spacing */
  --lumo-space-r-m: var(--lumo-space-m);
  --lumo-space-r-l: var(--lumo-space-l);
  --lumo-space-r-x: var(--lumo-space-l);
  --lumo-space-wide-r-m: var(--lumo-space-wide-m);
  --lumo-space-wide-r-l: var(--lumo-space-wide-l);
}

@media (max-width: 479px) {
  :root {
    --lumo-space-r-x: 0;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  :root {
    --lumo-space-r-x: var(--lumo-space-m);
  }
}

@media (max-width: 1023px) {
  :root {
    --lumo-space-r-m: var(--lumo-space-s);
    --lumo-space-r-l: var(--lumo-space-m);
    --lumo-space-wide-r-m: var(--lumo-space-wide-s);
    --lumo-space-wide-r-l: var(--lumo-space-wide-m);
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.root {
  background-color: var(--lumo-contrast-5pct);
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
vaadin-dialog-overlay {
  /*animation: fadeIn 0.5s ease-in-out;*/
}
vaadin-dialog-overlay::part(content) {
  padding: var(--lumo-space-r-m);
  padding-top: 0;
}
vaadin-dialog-overlay::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.3); /* softer background */
    backdrop-filter: blur(2px); /* blur */
    -webkit-backdrop-filter: blur(2px); /* to Safari */
    transition: background-color 0.3s ease;
}

vaadin-dialog-overlay::part(overlay) {
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

vaadin-dialog-overlay::part(backdrop) {
    background-color: rgba(0, 0, 0, 0.3); /* softer background */
    backdrop-filter: blur(2px); /* blur */
    -webkit-backdrop-filter: blur(2px); /* to Safari */
    transition: background-color 0.3s ease;
}

vaadin-dialog-overlay::part(overlay) {
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.root__rotate-icon {
  animation: rotate 2s linear infinite;
}

.app-header-outer,
.app-footer-outer {
  z-index: 3;
}


vaadin-text-field {
  align-self: auto;
}

label {
    cursor: inherit;
}

vaadin-form-layout-column-spacing {
  width: calc(49.95% - 0.75rem);
  margin-left: 0px;
}

@media all and (max-width: 1100px) {
  .list-view.editing .toolbar,
  .list-view.editing .contact-grid {
    display: none;
  }
}


 .test::part(input-field){
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: var(--lumo-font-size-m);
      padding: var(--lumo-space-xs) var(--lumo-space-m);
      height: var(--lumo-size-m);
      background: transparent;
  }

  .bestTime::part(input-field){
    background: var(--lumo-success-color-10pct);
  }
  .realisticTime::part(input-field){
    background: var(--lumo-primary-color-10pct);
  }
  .worstTime::part(input-field){
    background: var(--lumo-error-color-10pct);
  }


html {
    --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-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;

    /*--lumo-primary-color: #3B82F6;*/
    --lumo-primary-color: #005FDB;

    --lumo-clickable-cursor: pointer;

    /*new colors*/
    --lumo-orange-color: rgba(225, 119, 47, 1); /* orange */
    --lumo-orange-color-10pct: rgba(225, 119, 47, 0.2); /* light orange */
    --lumo-orange-text-color: rgba(225, 119, 47, 1); /* orange */
    --lumo-orange-contrast-color: #fff; /* white*/

}

/*.skeleton-grid .v-grid-cell {
    background-color: #e0e0e0;
    height: 20px;
    margin: 5px 0;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}*/

.v-loading-indicator {
    background: linear-gradient(135deg, rgba(0, 86, 179, 1), rgb(123 8 209));
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulsating-button {
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    animation: pulse 1.5s infinite;
}