/*
 * 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);
}

/* The phone's menu button and its wrapper: on computers the wrapper doesn't exist for the layout (the
   sidebar stays the grid's first column) and the button is hidden */
.mobile-nav {
  display: contents;
}

.mobile-nav__toggle {
  display: none;
}

.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;
  }
}

/* The toucan, on its own: no coloured box behind it */
.brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;

  svg {
    width: 100%;
    height: auto;
  }
}

/* Everything between the toucan and you: scrolls when it doesn't fit (a short window, a long menu), so the
   footer with your photo and name is always in sight */
.sidebar__scroll {
  flex: 1;
  min-height: 0;
  margin: 0 calc(-1 * var(--space-3));
  padding: 0 var(--space-3) var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.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: a round button floating in the bottom right corner, within thumb's reach, with the
   current page's icon. It opens the whole navigation (icons and names, as on computers) in a panel above
   it (mobile_nav_controller.js). The page stays as wide as the screen. */
@media (max-width: 768px) {
  .app-shell {
    --nav-button: 3.5rem;
    --nav-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
    --nav-side: var(--space-4);

    grid-template-columns: 1fr;
  }

  /* Room under the content, so the button never covers the end of a page */
  .app-main {
    padding: var(--space-4) var(--space-4) calc(var(--nav-button) + var(--nav-bottom) + var(--space-4));
  }

  .mobile-nav__toggle {
    position: fixed;
    right: var(--nav-side);
    bottom: var(--nav-bottom);
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    width: var(--nav-button);
    height: var(--nav-button);
    padding: 0;
    border: var(--border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-primary);
    cursor: pointer;

    &:focus-visible {
      outline: none;
      box-shadow: var(--shadow-lg), var(--focus-ring);
    }

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

  .mobile-nav[data-open] .mobile-nav__toggle {
    background: var(--color-primary-subtle);
  }

  .mobile-nav__icon {
    display: grid;
    place-items: center;
  }

  .mobile-nav__dot {
    position: absolute;
    top: var(--space-1-5);
    right: var(--space-1-5);
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-full);
    background: var(--color-primary);
  }

  /* The sidebar, as a panel above the button: only while it's open. It grows out of the button (fades in
     and scales up from the bottom right corner) and shrinks back into it. Hidden with visibility, not
     display, so it can animate both ways; visibility also keeps its links out of reach and of screen readers
     while it's closed, switching only once the closing animation has finished */
  .sidebar {
    position: fixed;
    top: auto;
    right: var(--nav-side);
    bottom: calc(var(--nav-bottom) + var(--nav-button) + var(--space-2));
    z-index: var(--z-overlay);
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--space-2)) scale(0.92);
    transform-origin: bottom right;
    transition:
      opacity var(--duration-fast) ease-in,
      transform var(--duration-fast) ease-in,
      visibility 0s linear var(--duration-fast);
    width: min(18rem, calc(100vw - 2 * var(--nav-side)));
    height: auto;
    max-height: calc(100dvh - var(--nav-bottom) - var(--nav-button) - var(--space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .mobile-nav[data-open] .sidebar {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--duration-normal) var(--ease-out),
      transform var(--duration-normal) var(--ease-out),
      visibility 0s;
  }

  /* The button's icon gives way under a tap */
  .mobile-nav__toggle {
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);

    &:active {
      transform: scale(0.94);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar,
    .mobile-nav[data-open] .sidebar,
    .mobile-nav__toggle {
      transform: none;
      transition-duration: 0s;
      transition-delay: 0s;
    }
  }

  /* The toucan is already on the home link: no need for it in the panel */
  .sidebar__brand {
    display: none;
  }

  .sidebar__footer {
    margin-top: var(--space-2);
  }
}

/* "Ayuda", a round "?" beside you at the bottom, for the guides */
.sidebar__help {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-out);

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

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}