/* App container */
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header CSS */
header[role="banner"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

mat-toolbar {
  height: var(--md-spacing-16); /* 64px using Material Design spacing */
  background: linear-gradient(135deg,
    var(--md-sys-color-surface-container-high) 0%,
    color-mix(in srgb, var(--md-sys-color-primary) 15%, var(--md-sys-color-surface-container-high) 85%) 100%
  ) !important;
  box-shadow: var(--md-sys-elevation-3dp);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.app-title {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  margin: 0;
  font-size: var(--md-sys-typescale-title-large-font-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
}

/* Side panels as complementary content */
aside[role="complementary"] {
  /* This wrapper contains all panel components which handle their own positioning */
}

/* Main content wrapper using responsive system */
main[role="main"] {
  height: 100vh;
  box-sizing: border-box;
  background-color: var(--md-sys-color-surface);
}

/* Memory panel component */
app-memory-panel {
  /* This component handles its own positioning */
  position: static;
  z-index: 10;
}

/* Responsive layout using adaptive tokens */
@media (max-width: 599px) {
  /* Compact layout - mobile */
  main[role="main"] {
    padding-top: var(--md-toolbar-height);
    padding-bottom: var(--md-bottom-nav-height);
    padding-left: var(--md-content-margin);
    padding-right: var(--md-content-margin);
  }

  mat-toolbar {
    height: var(--md-toolbar-height);
  }
}

@media (min-width: 600px) {
  /* Medium layout and up - tablet/desktop */
  main[role="main"] {
    padding-top: var(--md-toolbar-height);
    padding-right: calc(var(--md-nav-rail-width) + var(--md-content-margin));
    padding-left: var(--md-content-margin);
    padding-bottom: var(--md-content-margin);
  }

  mat-toolbar {
    height: var(--md-toolbar-height);
  }
}
