.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: grid;

  grid-template-columns: 350px 1fr;
  grid-template-rows: 100%;
  column-gap: 1rem;
  padding: 1rem;

  background-color: var(--background-secondary);
}

.sidebar {
  display: grid;
  grid-template-rows: 7rem 1fr auto;
  padding: 2rem;
  box-sizing: border-box;

  border-radius: var(--border-radius-large);
  overflow: hidden;
  background-color: var(--background-main);
}



.form-column {
  display: flex;
  flex-direction: column;
}
.form-column label{
  margin-top: 1rem;
}

.top-auto {
  margin-top: auto;
}

/* Login Panel Styles */
.loginPanel {
  flex: 1;
    overflow: auto;
    margin: 0 -2rem 2rem -2rem;
    padding: 0 2rem;

}

/* Auth Panel Switching */
#main-auth-panel,
#local-auth-panel,
#guest-request-panel {
  transition: opacity 0.3s ease-in-out;
}

/* Link Button Styles */
.btn-link {
  background: none;
  border: none;
  color: var(--text-accent);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.btn-link:hover {
  color: var(--text-main);
  text-decoration: none;
}

.local-users-link,
.back-to-main-link,
.guest-access-request,
.back-to-local-link {
  text-align: right;
  margin-top: 1rem;
}

/* Separator Styles */
.separator {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.separator span {
  padding: 0 1rem;
}

/* Login Button Panels */
#login-Button-panel{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
#login-message{
  color: red;
  margin-bottom: 0.75rem;
}
#loginButton{
  justify-self: end;
}

#guest-login-Button-panel{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
#guest-login-message{
  color: red;
  margin-bottom: 0.75rem;
}
#guestLoginButton{
  justify-self: end;
}

#guest-request-Button-panel{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
#guest-request-message{
  color: red;
  margin-bottom: 0.75rem;
  /* The panel is a two column grid with the button in the second one. Left in the
     first column the message gets only what the button spares, which in this narrow
     sidebar is about one word per line, so it takes a row of its own. */
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}
#submitGuestRequestButton{
  justify-self: end;
}

/* Guest Request Panel Styles */
#guest-request-panel {
  display: none;
}

#guest-request-panel h3 {
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
}

#guest-request-panel .form-column {
  gap: 0.5rem;
}

#guest-request-panel input,
#guest-request-panel select {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-secondary) !important;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

/* Ensure all input types within guest-request-panel have correct background */
#guest-request-panel input[type="text"],
#guest-request-panel input[type="password"],
#guest-request-panel input[type="email"],
#guest-request-panel select {
  background-color: var(--background-secondary) !important;
}

#guest-request-panel input:focus,
#guest-request-panel select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.1);
}

#guest-request-panel label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

/* Error Message Styles */
.error-message {
  color: #dc3545;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  display: none;
}

/* Panel hiding */
#local-auth-panel,
#guest-request-panel {
  display: none;
}

.footerPanel {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 1rem;
}

/* Logo CSS for login page */
.logo {
    /* adjust width and aspect ratio as needed */
    width: 8rem !important;
    /* Aspect ratio of HAWK logo */
    aspect-ratio: 2.226/1 !important;

    background-image: url('/system-image/logo_svg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.impressumPanel {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0 1.5rem;
  align-items: center;
}

/* Dynamic height based on number of links */
.impressumPanel:has(a:nth-child(1)),
.impressumPanel:has(a:nth-child(2):last-child) {
  /* 1-2 links: single row height */
  height: 2rem;
}

.impressumPanel:has(a:nth-child(3)),
.impressumPanel:has(a:nth-child(4)) {
  /* 3-4 links: two rows height (2-column grid) */
  height: 2.5rem;
}

.impressumPanel a {
  max-width: fit-content;
}



main {
  position: relative;
  display: block;
  width: auto;
}


.textPanel {
  position: relative;
  flex-grow: 1;
  padding-left: .5rem;
  padding-right: .5rem;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: 7px;
}
.text-panel-content{
  direction: rtl;
}
.textPanel::-webkit-scrollbar {
  width: 7px;
}

.textPanel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

.textPanel::-webkit-scrollbar-thumb {
  background: #cbcbcb;
  border-radius: 5px;
}

.textPanel::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.page {
  display: block;
  direction: ltr;
}

.headerLine {
  text-align: center;
  margin-bottom: 3rem;
}



.backgroundImageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.image_preview_container {
  position: relative;
  width: 100%;
  height: 100%;
  /* opacity: 0.5; */
  /* background: var(--background-main); */
  border-radius: var(--border-radius-large);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}
.video-credits{
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  right: 3rem;

}

@media (max-width: 800px) {
  .wrapper {
    display: grid;
    grid-template-columns: 100%;
    overflow-y: auto;
  }
  main{
    display: none;
  }
  aside {
    padding: 10vmin;
  }
  main {
    padding: 10vmin 10vmin 50vmin;
  }
}


@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    main{
      display: none;
    }
    .footerPanel{
      position: absolute;
      bottom: 5%;
      grid-gap: 2rem;
    }
    .image_preview_container {
      display: none;
    }
    .backgroundImageContainer{
      display: none;
    }
}

/* Logo CSS for login page */
.logo {
    /* adjust width and aspect ratio as needed */
    width: 8rem !important;
    /* Aspect ratio of HAWK logo */
    aspect-ratio: 2.226/1 !important;

    background-image: url('/system-image/logo_svg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}