/* cloud97_branding – Seitenleiste und Logo nach dem Login (von Hand gepflegt, nicht generiert) */

/* Seitenleiste in cloud97-Navy statt Elastic-Grau */
@media screen and (min-width: 481px) {
  #layout-menu,
  #layout-menu .popover-header,
  #taskmenu .special-buttons,
  html.dark-mode #layout-menu,
  html.dark-mode #layout-menu .popover-header,
  html.dark-mode #layout-menu .special-buttons {
    background-color: #08162d !important;
  }

  html.dark-mode #layout-menu { border-right-color: #1d3053; }

  #taskmenu a:hover,
  #taskmenu a:focus,
  #taskmenu a.selected,
  #taskmenu a.selected:hover,
  #taskmenu .action-buttons a:hover,
  html.dark-mode #taskmenu a.selected,
  html.dark-mode #taskmenu a:hover {
    background: #172a52;
  }

  #taskmenu .action-buttons a,
  #taskmenu .action-buttons a:hover,
  html.dark-mode #taskmenu .action-buttons a {
    color: #a3a3ff;
  }

  /* Dark Mode: Elastic gibt den unteren Buttons (Modus, Über, Abmelden) ein eigenes Grau */
  html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background: #08162d;
  }

  html.dark-mode #layout-menu .special-buttons a:not(:focus):hover {
    background: #172a52;
  }

  /* Elastic zieht das Logo auf die volle Leistenbreite – die Wolke klein halten */
  #layout-menu .popover-header img {
    max-width: 42px;
    padding: 0;
  }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
  #layout-menu .popover-header img { max-width: 30px; }
}

/* Smartphone: Menü als Overlay, Kopf mit weißem Schriftzug auf Navy */
@media screen and (max-width: 480px) {
  #layout-menu .popover-header,
  html.dark-mode #layout-menu .popover-header {
    background-color: #08162d !important;
  }

  #layout-menu .popover-header img {
    max-height: 28px;
    max-width: 150px;
    padding: 0;
  }
}