/*
 * App shell: fixed sidebar on the left, scrolling content on the right.
 * Markup lives in app/views/layouts/application.html.erb and
 * app/components/top_nav_component.html.erb.
 */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.app-main {
  min-width: 0;
  padding: var(--space-8);
}

.app-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-right: var(--border);
  z-index: var(--z-sticky);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);

  &:hover {
    color: var(--color-text);
    text-decoration: none;
  }
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);

  svg {
    width: 1rem;
    height: 1rem;
  }
}

.sidebar__section-label {
  padding: var(--space-4) var(--space-2) var(--space-1-5);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-md);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
    flex-shrink: 0;
    color: var(--color-text-subtle);
  }

  &:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  &[aria-current="page"] {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);

    svg {
      color: var(--color-primary);
    }
  }
}

/* Unread chats on Conversaciones (.unread-count, badge.css), pushed to the link's right edge.
   The slot is only there as a target for the live updates: display: contents makes the
   bubble inside behave as if it were the link's own child */
.sidebar__count-slot {
  display: contents;
}

.sidebar__count {
  margin-left: auto;
}

.sidebar__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  /* no side padding: the profile link pads itself, so its hover background lines up with the nav links */
  padding: var(--space-3) 0 0;
  border-top: var(--border);
}

/* The whole row (avatar + name) is the link to /profile */
.sidebar__profile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);

  &:hover,
  &[aria-current="page"] {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
}

.sidebar__user {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Small screens: sidebar becomes a top bar */
@media (max-width: 768px) {
  /* Nav on top, content below. The rows must be explicit: with two plain "auto" rows and
     min-height: 100dvh, a short page leaves spare height that the grid splits between
     BOTH rows, so the nav bar grows. auto = nav keeps its own height, 1fr = content takes the rest */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .app-main {
    padding: var(--space-4);
  }

  /* All the icons don't fit on a phone (~500px of them vs 390px of screen). Without this the
     bar would stick out of the page, and phones then zoom the WHOLE page out to fit it, which
     shrinks all the text. So the bar scrolls sideways on its own instead (scrollbar hidden,
     swipe to see the rest), and the page stays exactly as wide as the screen. */
  .sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    height: auto;
    padding: var(--space-2) 0;
    border-right: 0;
    border-bottom: var(--border);
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Logo on the left and avatar on the right stay put while the icons in between scroll.
     They carry the bar's side padding and background, so the icons slide underneath them. */
  .sidebar__brand,
  .sidebar__footer {
    position: sticky;
    flex-shrink: 0;
    z-index: 1;
    align-self: stretch;
    align-items: center;
    background: var(--color-surface);
  }

  .sidebar__brand {
    left: 0;
    padding: 0 var(--space-1) 0 var(--space-3);
  }

  .sidebar__brand-name,
  .sidebar__section-label,
  .sidebar__user {
    display: none;
  }

  .sidebar__nav {
    flex-direction: row;
  }

  .sidebar__link span {
    display: none;
  }

  /* Icons only here: the count becomes a small bubble on the icon's corner.
     .sidebar__link .sidebar__count beats the rule above, which hides every span */
  .sidebar__link {
    position: relative;
  }

  /* the slot is a span too: keep it, or the bubble inside would be hidden with it */
  .sidebar__link .sidebar__count-slot {
    display: contents;
  }

  .sidebar__link .sidebar__count {
    display: inline-grid;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1rem;
    height: 1rem;
    padding: 0 var(--space-1);
    font-size: 0.625rem;
  }

  .sidebar__footer {
    right: 0;
    margin: 0 0 0 auto;
    padding: 0 var(--space-3) 0 var(--space-1);
    border: 0;
  }
}