/* /opt/easyportfolio_django_app/portfolio_app/static/portfolio_app/css/partials/_20_left_rail.css */

.left-rail {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: var(--header-height);           /* statt fixer 80px */
    left: 0;
    width: var(--rail-w);
    height: calc(100vh - var(--header-height));
    padding: 15px;
    box-sizing: border-box;
    border-right: 1px solid var(--rail-border);
    background: var(--rail-bg);
    backdrop-filter: blur(2px);
    z-index: 1030;
}

.left-rail__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--rail-item-gap);
    width: 100%;
}

.left-rail__item{
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1/1;
    cursor: pointer; pointer-events: auto;
    text-decoration: none;
    color: var(--rail-color);
    border-radius: 6px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
    line-height: 1;
}

.left-rail__item i { font-size: var(--rail-icon-size); line-height: 1; }

.left-rail__item:hover { color: var(--rail-hover); }
.left-rail__item.is-active { color: var(--rail-active); }

.left-rail__stack {
    display: flex; flex-direction: column; justify-content: center;
    align-items: stretch; gap: .35rem; width: 100%; height: 100%;
}

/* Rail als Spalte mit „unten andocken“ */
.left-rail__spacer { flex: 1 1 auto; }

/* dezente Trennlinie im unteren Bereich */
.left-rail__divider{
    height: 1px;
    background: var(--rail-divider);
    margin: 1rem 0;
    border: 0;
}

/* Platz für Inhalt rechts von der Rail schaffen (nur >= lg) */
@media (min-width: 992px) {
    .content-container { margin-left: var(--rail-w); }
    .app-footer .container-fluid { margin-left: var(--rail-w); }
}

/* Content-Padding rechts (optional via variables verwendet) */
@media (min-width: 992px){
  .content-container{
      padding-left: var(--rail-w);
  }
  .content-container > main{
      padding-right: var(--content-pad-r);
      box-sizing: border-box;
  }
  .app-footer .container-fluid{
      padding-left: var(--rail-w);
      padding-right: var(--content-pad-r);
      box-sizing: border-box;
  }
}