/* A table's header and footer in the sizes of the Lumo compact preset (FxTable.compactHeader, compactFooter), whatever the page's density
   is; the values are the preset's own (lumo/presets/compact.css). Every Vaadin component declares these properties on
   its own host (:where(:host)), so an inherited value is lost: the children get the values themselves */
.fx-compact-bars,
.fx-compact-bars * {
  --lumo-size-xl: 3rem;
  --lumo-size-l: 2.5rem;
  --lumo-size-m: 2rem;
  --lumo-size-s: 1.75rem;
  --lumo-size-xs: 1.5rem;
  --lumo-font-size-m: 0.875rem;
  --lumo-font-size-s: 0.8125rem;
  --lumo-font-size-xs: 0.75rem;
  --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;
}

/* Flexium logo: dark text in light mode, white in dark mode (html[theme] is set by Page.setColorScheme / AppShell) */
.flexium-logo-dark {
  display: none;
}

html[theme="dark"] .flexium-logo-light {
  display: none;
}

html[theme="dark"] .flexium-logo-dark {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  html[theme="light-dark"] .flexium-logo-light {
    display: none;
  }

  html[theme="light-dark"] .flexium-logo-dark {
    display: inline;
  }
}

/* Manager frame after flexium-websync: dark side menu (CoreUI sidebar-dark) in both color schemes, fixed width so
   opening a menu group does not resize it */
vaadin-app-layout {
  --main-drawer-width: 16rem;
  --main-drawer-narrow-width: 4rem;
  /* the Lumo theme also turns the menu into an overlay below 600px of height (a browser at 100% zoom on a scaled
     screen): there the fold button is hidden and the toggle closes the whole menu. Only the width decides here. */
  --vaadin-app-layout-drawer-overlay: false;
}

@media (max-width: 800px) {
  vaadin-app-layout {
    --vaadin-app-layout-drawer-overlay: true;
  }
}

.fx-table vaadin-grid::part(fx-bold) {
  font-weight: 700;
}

.fx-table vaadin-grid::part(fx-italic) {
  font-style: italic;
}

.fx-table:fullscreen {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  overflow: auto;
  background: var(--lumo-base-color, #fff);
  color: var(--vaadin-text-color, #212529);
}

.fx-table:fullscreen vaadin-grid::part(header-cell),
.fx-table:fullscreen vaadin-grid::part(footer-cell) {
  background-color: var(--vaadin-grid-background, var(--lumo-base-color, #fff));
  color: var(--vaadin-grid-header-text-color, var(--vaadin-text-color, #212529));
}

vaadin-app-layout::part(drawer) {
  width: var(--main-drawer-width);
  background: #212529;
  color: #dee2e6;
  color-scheme: dark;
  border-inline-end: 1px solid #343a40;
  overflow: hidden;
}

/* same selector as the theme's drawer inset, which would leave a gap under and beside .main-drawer */
vaadin-app-layout:not([overlay])::part(drawer) {
  padding: 0;
}

.main-drawer {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #212529;
}

.main-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: 3rem;
  border-bottom: 1px solid #343a40;
}

.main-brand-full {
  width: 170px;
  height: 32px;
}

.main-brand-narrow {
  display: none;
  width: 32px;
  height: 32px;
}

.main-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
}

.main-menu vaadin-side-nav-item {
  white-space: nowrap;
  /* the same size on every level: a nested item must not apply the group's size again */
  --vaadin-side-nav-item-font-size: var(--lumo-font-size-m);
}

.main-drawer-footer {
  display: flex;
  justify-content: flex-end;
  flex: none;
  padding: 0.5rem 1rem;
  border-top: 1px solid #343a40;
}

.main-drawer-footer vaadin-button {
  color: #dee2e6;
}

/* narrow menu (desktop only; in overlay mode, on phones, the menu is always full) */
vaadin-app-layout.narrow:not([overlay])::part(drawer) {
  width: var(--main-drawer-narrow-width);
  overflow: visible;
  /* above the header and the page while it unfolds */
  z-index: 100;
}

vaadin-app-layout.narrow:not([overlay]) .main-drawer {
  overflow: hidden;
  transition: width 0.3s ease;
}

/* unfolds over the page on hover, the page itself stays where it is */
vaadin-app-layout.narrow:not([overlay]) .main-drawer:hover {
  position: relative;
  z-index: 10;
  width: var(--main-drawer-width);
  box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.3);
}

vaadin-app-layout.narrow:not([overlay]) .main-drawer:not(:hover) .main-brand-full {
  display: none;
}

vaadin-app-layout.narrow:not([overlay]) .main-drawer:not(:hover) .main-brand-narrow {
  display: block;
}

/* folded: icons only; the labels start right after the icons, so the menu is cut there */
vaadin-app-layout.narrow:not([overlay]) .main-drawer:not(:hover) .main-menu {
  clip-path: inset(0 calc(100% - 44px) 0 0);
}

vaadin-app-layout.narrow:not([overlay]) .main-drawer:not(:hover) vaadin-side-nav-item::part(toggle-button),
vaadin-app-layout.narrow:not([overlay]) .main-drawer:not(:hover) vaadin-side-nav-item vaadin-side-nav-item {
  display: none;
}

vaadin-app-layout.narrow:not([overlay]) .main-drawer-footer vaadin-button {
  transform: rotate(180deg);
}

vaadin-app-layout[overlay] .main-drawer-footer {
  display: none;
}

.main-header {
  padding: 0 1rem 0 0;
  min-height: 3rem;
}

.main-header h4 {
  margin: 0;
  font-weight: 500;
}

.main-user {
  gap: 0.35rem;
}

/* Dashboard: count cards, as many per row as fit */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  width: 100%;
}

.dashboard-count {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Dashboard: charts under the cards, two per row on a wide screen */
.dashboard-charts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
  gap: 1rem;
  width: 100%;
}

fx-bar-chart {
  display: block;
  width: 100%;
}

.json-viewer {
  box-sizing: border-box;
  width: 100%;
  max-height: 32rem;
  overflow: auto;
  padding: 0.5rem;
  border: 1px solid var(--vaadin-border-color-secondary);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--lumo-font-size-s);
  line-height: 1.5;
}

.json-viewer-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--vaadin-text-color-secondary);
  font-family: var(--lumo-font-family);
  font-weight: 500;
}

.json-viewer .json-children {
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--vaadin-border-color-secondary);
}

.json-viewer .json-summary {
  align-items: baseline;
  gap: 0.25rem;
  font-family: inherit;
  line-height: inherit;
}

.json-viewer .json-row {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.json-viewer .json-key {
  color: var(--lumo-primary-text-color);
}

.json-viewer .json-string {
  color: var(--lumo-success-text-color);
}

.json-viewer .json-number {
  color: var(--lumo-primary-text-color);
}

.json-viewer .json-boolean {
  color: var(--lumo-warning-text-color);
}

.json-viewer .json-null,
.json-viewer .json-size {
  color: var(--vaadin-text-color-secondary);
}

/* Language switcher: the flag before the name */
.language-flag {
  width: 1.25rem;
  height: auto;
  margin-inline-end: 0.5rem;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Table alert (PHP table_alert.js): what the last action did, above the table */
.table-alert {
  --table-alert-color: var(--lumo-success-text-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--table-alert-color) 35%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--table-alert-color) 10%, transparent);
  color: var(--table-alert-color);
  transition: opacity 0.3s;
}

.table-alert vaadin-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.table-alert-secondary {
  --table-alert-color: var(--vaadin-text-color-secondary);
}

.table-alert-warning {
  --table-alert-color: var(--lumo-warning-text-color);
}

.table-alert-danger {
  --table-alert-color: var(--lumo-error-text-color);
}

.table-alert-out {
  opacity: 0;
}

/* Motion (instead of animate.css): only for users who have not asked the system for reduced motion */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* narrow / wide menu: slides instead of jumping */
  vaadin-app-layout:not([overlay])::part(drawer) {
    transition: width 0.35s ease;
  }

  /* opened menu group */
  .main-menu vaadin-side-nav-item[expanded] > vaadin-side-nav-item {
    animation: fade-in-down 0.45s ease both;
  }

  /* the view fades in after every navigation (the layout gets a new content element) */
  vaadin-app-layout > :not([slot]) {
    animation: fade-in 0.4s ease both;
  }

  .table-alert {
    animation: fade-in-down 0.3s ease both;
  }

  /* dashboard cards one after the other; browsers without sibling-index() show them together */
  .dashboard-cards > vaadin-card {
    animation: fade-in-up 0.6s ease both;
    animation-delay: calc((sibling-index() - 1) * 100ms);
  }
}

/* the JSON viewer's branches have no padding of their own (the nesting is the children's margin) */
.json-branch::part(content) {
  padding: 0;
}