@import "/injurytracker-theme/component-styles/app-bar.css";
@import "/injurytracker-theme/component-styles/details-drawer.css";
@import "/injurytracker-theme/component-styles/enum-with-other.css";
@import "/injurytracker-theme/component-styles/grid.css";
@import "/injurytracker-theme/component-styles/navi-drawer.css";
@import "/injurytracker-theme/component-styles/view-frame.css";
@import "/injurytracker-theme/component-styles/main-layout.css";
@import "/injurytracker-theme/shared-styles.css";
@import "/injurytracker-theme/responsive.css";

:root {
  --app-bar-height: var(--lumo-size-l);
  --app-bar-color: hsl(120, 59%, 30%);
  --navbar-bg: hsl(0, 100%, 95%);

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

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

  height: 100vh;
  width: 100vw;
}

html,
body {
  height: 100vh;
  width: 100vw;
  --lumo-font-family: Georgia, serif;
}

* {
  box-sizing: border-box;
}

vaadin-button {
  min-width: 44px;
}

.root__view-container {
  margin: var(--lumo-space-s);
}

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

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

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

.form-layout {
  padding-left: var(--lumo-space-s);
  padding-right: var(--lumo-space-s);
  margin-bottom: var(--lumo-space-s);
}

.login-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button-layout {
  flex-direction: row;
}

.content-layout {
  box-sizing: border-box;
  height: 100%;
}

.content-layout .form-layout:last-child {
  padding-bottom: 40px;
}

.content-margin {
  margin-left: var(--lumo-space-l);
  margin-right: var(--lumo-space-l);
  margin-top: var(--lumo-space-l);
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.text-span {
  text-overflow: ellipsis;
}

.text-error {
  color: var(--lumo-error-color);
  fill: var(--lumo-error-color);
}

.text-success {
  color: var(--lumo-success-color);
  fill: var(--lumo-success-color);
}

.mobile-template {
  flex-direction: column;
  line-height: var(--lumo-line-height-m);
  overflow: hidden;
}

.date-selection {
  flex-direction: column;
  margin-top: var(--lumo-space-s);
  margin-bottom: var(--lumo-space-s);
  margin-right: var(--lumo-space-s);
}

/* .details-drawer-footer {
  background-color: var(--lumo-contrast-5pct);
  padding-left: var(--lumo-space-m);
  padding-right: var(--lumo-space-m);
  padding-top: var(--lumo-space-s);
  width: 100%;
}

.details-drawer-header {
  flex-direction: column;
  box-shadow: inset 0 -1px var(--lumo-contrast-10pct);
  width: 100%;
} */

.margin-horizontal-s {
  margin-left: var(--lumo-space-s);
  margin-right: var(--lumo-space-s);
}

.margin-vertical-l {
  margin-top: var(--lumo-space-l);
  margin-bottom: var(--lumo-space-l);
}

.form-border {
  border: 1px solid var(--lumo-contrast-20pct);
  border-radius: var(--lumo-border-radius-m);
}

.bold-title {
  font-weight: bold;
}

.title {
  font-size: 1rem;
}

.control-title {
  font-size: 1rem;
}

.view-border {
  border: 1px solid var(--lumo-contrast-10pct);
  border-radius: var(--lumo-border-radius-m);
  padding: var(--lumo-space-m);
}

.monospace {
  font-family: monospace;
}

.bar-vertical {
  display: flex;
  flex-direction: column;
}

.chart-container {
  margin-bottom: var(--lumo-space-m);
  padding: var(--lumo-space-s);
}

.agreement-content {
  overflow: auto;
  border: 1px solid var(--lumo-contrast-20pct);
  padding: var(--lumo-space-m);
  border-radius: var(--lumo-border-radius-m);
  background-color: var(--lumo-base-color);
}

.subscription-layout {
  display: flex;
  flex-direction: column;
  width: 700px;
}

.warning-banner {
  background-color: #FFF3CD;
  word-wrap: break-word;
  padding: var(--lumo-space-s);
}

.login-field {
  width: 250px;
}

.info-request {
  max-width: 800px;
  margin-top: var(--lumo-space-s);
}

.email-button {
  max-width: 300px;
  width: 200px;
}

.header-filter {
  max-width: 100%;
  width: 100%;
}

.grid-action-column {
  padding: 0;
}

.grid-action-button {
  padding: 0;
  min-width: 30px;
}

.form-item-spacing {
  padding-bottom: var(--lumo-space-l);
}

.selector-spacing-m {
  margin-bottom: var(--lumo-space-m);
}

.selector-spacing-s {
  margin-bottom: var(--lumo-space-s);
}

.selector-content {
  padding-bottom: var(--lumo-space-l);
}

.show-diff {
  background-color: darkorange;
}

vaadin-grid-cell-content {
  white-space: normal;
  overflow-wrap: break-word;
}

/* --bp-tablet (900px) */
@media only screen and (max-width: 899px) {
  .text-span {
    font-size: 1.125rem;
  }
  .content-layout {
    font-size: 1.125rem;
  }
  body {
    font-size: 1.125rem;
  }
  .title {
    font-size: 1.25rem;
  }
  .control-title {
    font-size: 0.9rem;
  }
}

/* --bp-phone (600px) */
@media only screen and (max-width: 599px) {
  .text-span {
    font-size: 1rem;
  }
  .content-layout {
    font-size: 1rem;
  }
  .title {
    font-size: 1rem;
  }
  .control-title {
    font-size: 0.8rem;
  }
  .button-layout {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }
}