.sidebar-menu__toggle:checked~.sidebar-layout {
  --sidebar-width: var(--size-20);
}

.sidebar-layout {
  display: grid;
  grid-template-areas: "header header" "sidebar main";
  grid-template-columns: var(--sidebar-width, 0) 1fr;
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
  transition: grid-template-columns var(--time-200);

  @media (width >=48rem) {
    --sidebar-border-width: var(--border);
    --sidebar-padding: var(--size-2);
    --sidebar-width: var(--max-i-3xs);
  }
}

.header-layout {
  display: grid;
  grid-template-areas: "header" "main";
  grid-template-rows: auto 1fr;
  block-size: 100dvh;
}

.centered-layout {
  display: grid;
  place-items: center;
  block-size: 100dvh;
}

#header {
  align-items: center;
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-block-end-width: var(--border);
  block-size: var(--size-16);
  column-gap: var(--size-4);
  display: flex;
  grid-area: header;
  padding-inline: var(--size-4);
  view-transition-name: header;
  /* override defaults */
  background-color: transparent;
  border: 0;
}

#sidebar {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-inline-end-width: var(--sidebar-border-width, 0);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  overflow-x: hidden;
  padding: var(--sidebar-padding, 0);
  row-gap: var(--size-2);
  view-transition-name: sidebar;
}

#main {
  display: flex;
  flex-direction: column;
  gap: var(--size-4);
  grid-area: main;
  overflow: auto;
}

#main-header {
  z-index: 10;
}

#main-header:has(.report) {
  position: sticky;
}

#main-subheader:has(.report) {
  position: sticky;
  z-index: 9;
}

/* page-header is container for normaly app pages 
 * usually they are non report creation or edit related */
#page-header {
  display: flex;
  padding-inline: var(--size-6);
  justify-content: space-between;
  align-items: center;
  margin-block: var(--size-6);
  max-inline-size: var(--breakpoint-xl);
  margin-inline: auto;
  inline-size: 100%;
}

#page-body {
  padding-inline: var(--size-6);
  margin-block-end: var(--size-6);
  max-inline-size: var(--breakpoint-xl);
  margin-inline: auto;
  inline-size: 100%;
}

/* Simulation banner */
.sim {
  background: var(--yellow-300);
  margin-inline: 1rem;
  block-size: var(--size-6);
  padding: 5px;
  border-radius: var(--rounded-sm);
  font-size: var(--text-xs);
  color: var(--red-500);
  font-weight: var(--font-semibold);
}

.sim .link {
  color: var(--amber-950);
}

/* Customizations  */
#sidebar {
  background-color: var(--color-surface);
  border-color: var(--color-border-light);
}

.separator {
  background-color: var(--sep-color, var(--color-border));
  block-size: 1px;
  flex-shrink: 0;
  inline-size: var(--sep-size, var(--size-full));
}

.separator-vertical {
  background-color: var(--sep-color, var(--color-border));
  block-size: var(--sep-size, var(--size-full));
  flex-shrink: 0;
  inline-size: 1px;
}

.hide-empty:empty {
  display: none;
}

turbo-cable-stream-source {
  display: contents;
}