/* /css/components/nav.css */
@layer components {

  :root{
    --sidebar-w: 260px;
    --brand-logo-size: 100px; /* Logo-Größe zentral steuerbar */
  }

  /* Sidebar aktiv: Content rechts daneben laufen lassen */
  html.with-sidebar body{
    padding-left: var(--sidebar-w);
  }

  /* === NAV CONTAINER (Sidebar links) =================================== */
  .app-nav{
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--sidebar-w);

    background: var(--nav-bg);
    border-right: 1px solid var(--border, #e5e7eb);
    box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.04));

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;

    z-index: 200;
    overflow-y: auto;
  }

  /* Logo-Bereich oben: zentriert, mit Trennlinie */
  .app-nav .nav-left{
    display: block;
    padding: 12px 12px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    text-align: center;
  }

  /* Brand-Link vom generischen .app-nav a entkoppeln */
  .app-nav .brand-link{
    display: inline-block;   /* statt inline-flex */
    width: auto;             /* nicht auf 100% strecken */
    padding: 0;              /* kein Innenabstand um das Bild */
    line-height: 0;          /* kein extra Zeilenabstand */
    color: inherit;
    text-decoration: none;
  }


  .app-nav .nav-spacer{ flex: 1; }

  /* === LINKS / BUTTONS (alle außer Brand-Link) ========================= */
  .app-nav a:not(.brand-link){
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    position: relative;               /* Referenz für .nav-badge */
    transition: background-color .2s, color .2s, border-color .2s;
    width: 100%;                      /* volle Breite in der Sidebar */
    box-sizing: border-box;
  }
  .app-nav a:not(.brand-link):hover  { background-color: var(--nav-hover-bg);  color: var(--nav-hover-text); }
  .app-nav a:not(.brand-link):active { background-color: #ffaad0; }
  .app-nav a:not(.brand-link).active { background-color: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 700; }

  /* Badges auf Links */
  .nav-badge{
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: #e11d48; color: #fff;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; line-height: 18px;
    text-align: center;
  }

  /* === Mobile: Sidebar einklappen ====================================== */
  @media (max-width: 767.98px){
    html.with-sidebar body{ padding-left: 0; }
  }
}