@import 'main-layout.css';
@import 'styles/main.css';
@import 'styles/typography.css';
@import 'styles/shadow.css';
@import 'styles/spacing.css';
@import 'styles/padding.css';
@import 'styles/margin.css';
@import 'styles/badge.css';
@import 'styles/icon-size.css';
@import 'styles/border-radius.css';
@import 'styles/box-shadow-borders.css';
@import 'components/view-frame.css';
@import 'components/tab-bar.css';
@import 'components/list-item.css';
@import 'components/img-container.css';
@import 'components/tag.css';
@import 'components/charts.css';
@import 'components/loaders.css';
@import 'components/details-drawer.css';
@import 'components/brand-expression.css';
@import 'components/dialog.css';
@import 'components/tooltip.css';
@import 'components/board.css';
@import 'components/vaadin-grid.css';
@import 'views/not-found-view.css';
@import 'views/login-view.css';

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-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
}

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

  --navi-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 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

vaadin-grid-cell-content {
  text-overflow: ellipsis;
}

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