/* ======================================================
   SIDEBAR – vNext (Robust + Future-proof + Single source)
   ------------------------------------------------------
   Goals:
   - One token section (no conflicting overrides)
   - Stable layout for nav rows + status pill
   - Defensive icon handling (no broken-image layout)
   - Supports BOTH:
     A) Classic subnav: <div class="sidebar-subnav">...</div>
     B) Dropdown group: <details class="sidebar-group"> <summary ...> ...
   ====================================================== */

/* ======================================================
   TOKENS / TUNABLES
   - Keep ONLY ONE :root block to avoid conflicts.
   ====================================================== */
:root{
  /* Layout */
  --sb-width: clamp(270px, 22vw, 320px);
  --sb-pad: var(--space-lg);

  /* Surface */
  --sb-border: rgba(255,255,255,0.08);
  --sb-shadow: 12px 0 40px rgba(0,0,0,0.45);
  --sb-blur: 10px;

  /* Profile spacing */
  --sb-profile-gap: var(--space-md);
  --sb-profile-bottom: calc(var(--space-xl) - 10px);

  /* Avatar container */
  --sb-avatar-size: 132px;
  --sb-avatar-ring: 4px;
  --sb-avatar-border: rgba(255,255,255,0.10);

  /* Avatar crop (zoom + focus) */
  --sb-avatar-zoom: 1.55; /* 1.30–1.60 */
  --sb-avatar-x: 50%;
  --sb-avatar-y: 10%;

  /* Social */
  --sb-social-size: 36px;
  --sb-social-radius: 10px;
  --sb-social-icon: 18px;

  /* Nav */
  --sb-nav-gap: 6px;
  --sb-nav-radius: var(--radius-md);
  --sb-nav-pad-y: 10px;
  --sb-nav-pad-x: 14px;

  /* Icons (global) */
  --sb-nav-icon-box: 26px;
  --sb-nav-icon: 22px;

  /* Status pill */
  --sb-pill-font: 12px;
  --sb-pill-pad-y: 7px;
  --sb-pill-pad-x: 12px;
  --sb-pill-max: clamp(110px, 34%, 170px);
  --sb-pill-min: 92px;
  --sb-pill-border: rgba(255,255,255,0.10);
  --sb-pill-bg: rgba(255,255,255,0.05);
  --sb-pill-text: rgba(255,255,255,0.78);
}

/* ======================================================
   BASE
   ====================================================== */
.sidebar{
  position: sticky;
  top: 0;

  width: var(--sb-width);
  min-width: 270px;
  height: 100vh;

  display: flex;
  flex-direction: column;

  padding: var(--sb-pad);

  background:
    linear-gradient(180deg, rgba(123,108,255,0.12), rgba(18,20,42,0.95)),
    rgba(14,16,36,0.95);

  border-right: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
  backdrop-filter: blur(var(--sb-blur));
}

/* ======================================================
   PROFILE
   ====================================================== */
.sidebar-profile{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  margin-bottom: var(--sb-profile-bottom);
}

.sidebar-profile .avatar{
  width: var(--sb-avatar-size);
  height: var(--sb-avatar-size);
  border-radius: 50%;
  overflow: hidden;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(123,108,255,0.25)),
    linear-gradient(135deg, var(--accent-start), var(--accent-end));

  box-shadow:
    0 0 0 var(--sb-avatar-ring) rgba(255,255,255,0.06),
    0 18px 40px rgba(0,0,0,0.55);

  border: 1px solid var(--sb-avatar-border);
  margin-bottom: calc(var(--sb-profile-gap) - 6px);
}

.sidebar-profile .avatar img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: var(--sb-avatar-x) var(--sb-avatar-y);

  transform: scale(var(--sb-avatar-zoom));
  transform-origin: center;
}

.sidebar-profile .name{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.sidebar-profile .role{
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);

  max-width: 22ch;
  margin: 0 auto;
}

/* ======================================================
   SOCIAL
   ====================================================== */
.sidebar-socials{
  display: flex;
  gap: 10px;
  margin-top: calc(var(--sb-profile-gap) - 6px);
}

.sidebar-socials .social-link{
  width: var(--sb-social-size);
  height: var(--sb-social-size);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--sb-social-radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);

  overflow: hidden;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar-socials .social-link img{
  width: var(--sb-social-icon);
  height: var(--sb-social-icon);
  object-fit: contain;

  opacity: 0.8;
  display: block;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-socials .social-link:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(255,91,189,0.18), rgba(123,108,255,0.18));
  box-shadow:
    0 10px 25px rgba(0,0,0,0.45),
    0 0 14px rgba(123,108,255,0.45);
}

.sidebar-socials .social-link:hover img{
  opacity: 1;
  transform: scale(1.05);
}

/* ======================================================
   NAV (layout-safe)
   ====================================================== */
.sidebar-nav{
  display: flex;
  flex-direction: column;
  gap: var(--sb-nav-gap);
}

.sidebar-nav a{
  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: var(--sb-nav-pad-y) var(--sb-nav-pad-x);
  border-radius: var(--sb-nav-radius);

  text-decoration: none;
  color: var(--text-secondary);

  /* critical: truncation correctness */
  min-width: 0;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar-nav a .nav-icon{
  width: var(--sb-nav-icon-box);
  height: var(--sb-nav-icon-box);

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
}

.sidebar-nav a .nav-icon img{
  width: var(--sb-nav-icon);
  height: var(--sb-nav-icon);

  object-fit: contain;
  opacity: 0.85;

  display: block;
  image-rendering: -webkit-optimize-contrast;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-nav a .nav-label{
  flex: 1 1 auto;
  min-width: 0;

  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav a:hover{
  color: var(--text-primary);
  background: rgba(123,108,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(123,108,255,0.18);
}

.sidebar-nav a.active{
  color: var(--text-primary);

  background: linear-gradient(135deg, rgba(255,91,189,0.22), rgba(123,108,255,0.22));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.45);
}

.sidebar-nav a.active::before{
  content: '';
  position: absolute;

  left: 0;
  top: 8px;
  bottom: 8px;

  width: 3px;
  border-radius: 2px;

  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}

.sidebar-nav a:hover .nav-icon img,
.sidebar-nav a.active .nav-icon img{
  opacity: 1;
  transform: scale(1.08);
}

/* ======================================================
   STATUS PILL (works with your markup)
   - IMPORTANT: your PHP uses: status-active/upcoming/closed/unknown
   - CSS also supports legacy: status-open (alias of active)
   ====================================================== */
.sidebar .nav-status{
  margin-left: auto;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: var(--sb-pill-font);
  line-height: 1;
  letter-spacing: 0.2px;
  font-weight: 700;

  padding: var(--sb-pill-pad-y) var(--sb-pill-pad-x);
  border-radius: 999px;

  border: 1px solid var(--sb-pill-border);
  background: var(--sb-pill-bg);
  color: var(--sb-pill-text);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 12px 26px rgba(0,0,0,0.28);

  white-space: nowrap;
  max-width: var(--sb-pill-max);
  min-width: var(--sb-pill-min);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.95;
  box-shadow: 0 0 10px rgba(255,255,255,0.12);
}

/* ACTIVE (alias: OPEN) */
.sidebar .status-active,
.sidebar .status-open{
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.22);
  color: rgba(34,197,94,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 12px 26px rgba(0,0,0,0.28),
    0 0 18px rgba(34,197,94,0.18);
}

.sidebar .status-upcoming{
  background: rgba(234,179,8,0.14);
  border-color: rgba(234,179,8,0.22);
  color: rgba(234,179,8,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 12px 26px rgba(0,0,0,0.28),
    0 0 18px rgba(234,179,8,0.16);
}

.sidebar .status-closed{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.22);
  color: rgba(239,68,68,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    0 12px 26px rgba(0,0,0,0.28),
    0 0 18px rgba(239,68,68,0.14);
}

.sidebar .status-unknown{
  background: rgba(148,163,184,0.14);
  border-color: rgba(148,163,184,0.20);
  color: rgba(148,163,184,0.92);
}

/* Interaction polish */
.sidebar-nav a:hover .nav-status,
.sidebar-nav a.active .nav-status{
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
}

/* ======================================================
   Competitions row layout (prevents label truncation)
   - Applies ONLY to <a data-nav="competitions">
   ====================================================== */
.sidebar-nav a[data-nav="competitions"]{
  display: grid;
  grid-template-columns: var(--sb-nav-icon-box) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

.sidebar-nav a[data-nav="competitions"] .nav-label{
  white-space: normal;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  line-height: 1.1;
}

.sidebar-nav a[data-nav="competitions"] .nav-status{
  margin-left: 0;
  justify-self: end;

  max-width: var(--sb-pill-max);
  min-width: var(--sb-pill-min);
}

/* On very narrow screens, move pill below label */
@media (max-width: 520px){
  .sidebar-nav a[data-nav="competitions"]{
    grid-template-columns: var(--sb-nav-icon-box) minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
  }

  .sidebar-nav a[data-nav="competitions"] .nav-status{
    grid-column: 2 / 3;
    justify-self: start;
    max-width: 100%;
    min-width: 0;
  }
}

/* ======================================================
   SUBNAV (classic non-dropdown)
   - Works with your existing: <div class="sidebar-subnav">...</div>
   ====================================================== */
.sidebar-subnav{
  margin-top: 6px;
  padding-left: calc(var(--sb-nav-pad-x) + 6px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-subnav a{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;

  text-decoration: none;
  color: rgba(255,255,255,0.72);

  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);

  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sidebar-subnav a:hover{
  color: rgba(255,255,255,0.92);
  background: rgba(123,108,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(123,108,255,0.14);
  transform: translateY(-1px);
}

.sidebar-subnav a.active{
  color: rgba(255,255,255,0.95);
  background: rgba(255,91,189,0.14);
  border-color: rgba(255,91,189,0.18);
}

/* ======================================================
   DROPDOWN GROUP (Projects) – for <details>/<summary>
   - Only activates if you actually use that markup in sidebar.php
   ====================================================== */
.sidebar-group{
  border-radius: var(--sb-nav-radius);
}

.sidebar-group__summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  position: relative;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: var(--sb-nav-pad-y) var(--sb-nav-pad-x);
  border-radius: var(--sb-nav-radius);

  color: var(--text-secondary);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sidebar-group__summary::-webkit-details-marker{ display:none; }
.sidebar-group__summary::marker{ content:""; }

.sidebar-group__summary:hover{
  color: var(--text-primary);
  background: rgba(123,108,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(123,108,255,0.18);
}

.sidebar-group__summary.active{
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(255,91,189,0.22), rgba(123,108,255,0.22));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 12px 30px rgba(0,0,0,0.45);
}

.sidebar-group__summary.active::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
}

.sidebar-group__caret{
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}

.sidebar-group[open] .sidebar-group__caret{
  transform: rotate(-135deg);
}

/* Nested subnav inside group gets same look */
.sidebar-group .sidebar-subnav{
  margin-top: 6px;
}

/* ======================================================
   Responsive pill: dot-only on mid screens
   ====================================================== */
@media (max-width: 980px){
  .sidebar .nav-status{
    max-width: 18px;
    min-width: 18px;
    padding: 6px;
    text-indent: -9999px;
    position: relative;
    gap: 0;
  }

  .sidebar .nav-status::before{
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 999px;
  }
}

/* ======================================================
   SIDEBAR – ensure nav can scroll so bottom items (Kontakt) are reachable
   ====================================================== */
.sidebar{
  min-height: 100vh;
}

.sidebar .sidebar-nav{
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}


/* ======================================================
   SIDEBAR NAV – prevent label truncation when status pill exists
   ====================================================== */

.sidebar .sidebar-nav a{
  display: grid;
  grid-template-columns: 22px 1fr auto; /* icon | label | status */
  align-items: center;
  column-gap: 12px;

  /* kill common ellipsis rules that cause "Tävli..." */
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* If your icon element uses .nav-icon it stays in the first column */
.sidebar .sidebar-nav a .nav-icon{
  grid-column: 1;
}

/* If your status pill uses .nav-status it stays to the right */
.sidebar .sidebar-nav a .nav-status{
  grid-column: 3;
  justify-self: end;
}

/* Make sure long labels can wrap nicely */
.sidebar .sidebar-nav a{
  line-height: 1.2;
}

/* ======================================================
   SIDEBAR SCROLL – professional scrollbar (keeps Kontakt reachable)
   ====================================================== */

.sidebar .sidebar-nav{
  overflow: auto;
  scrollbar-gutter: stable;           /* prevents layout jump */
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: rgba(255,255,255,0.22) transparent; /* Firefox */
}

/* WebKit (Chrome/Safari/Edge) */
.sidebar .sidebar-nav::-webkit-scrollbar{
  width: 10px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track{
  background: transparent;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  border: 3px solid transparent;      /* creates “floating” thumb */
  background-clip: content-box;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.28);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ======================================================
   SIDEBAR – prevent truncation of nav labels (e.g. "Tävlin...")
   Works even if ellipsis is applied on inner label spans
   ====================================================== */

/* Ensure grid can actually shrink the middle column without forcing ellipsis */
.sidebar .sidebar-nav a{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto; /* key: minmax(0,1fr) */
  align-items: center;
  column-gap: 12px;
}

/* Target common label wrappers used in sidebars */
.sidebar .sidebar-nav a .nav-label,
.sidebar .sidebar-nav a .nav-text,
.sidebar .sidebar-nav a .nav-title,
.sidebar .sidebar-nav a .nav-name{
  min-width: 0;              /* allows proper sizing in grid/flex */
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;     /* allow wrap instead of ellipsis */
  line-height: 1.15;
}

/* If you DON'T have a label span and text is direct inside <a>,
   this still helps: */
.sidebar .sidebar-nav a{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}


/* ======================================================
   SIDEBAR SCROLLBAR – purple/pink accent
   ====================================================== */

.sidebar .sidebar-nav{
  scrollbar-width: thin;
  scrollbar-color: rgba(200,120,255,0.55) transparent; /* Firefox */
}

/* WebKit (Chrome/Safari/Edge) */
.sidebar .sidebar-nav::-webkit-scrollbar{
  width: 10px;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track{
  background: transparent;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;

  /* Accent gradient thumb */
  background-image: linear-gradient(
    180deg,
    rgba(255, 91, 189, 0.65),
    rgba(123, 108, 255, 0.65)
  );
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover{
  background-image: linear-gradient(
    180deg,
    rgba(255, 91, 189, 0.85),
    rgba(123, 108, 255, 0.85)
  );
}