/* Desktop application rail; public navigation and notifications remain in nav.css. */
@layer components {
  .rail-toggle {
    display: none;
  }
}

@layer components {
  @container root (inline-size > 600px) {
    body[data-authed='1']:has(#main-content > .page) nav.navbar {
      .rail-toggle {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        inline-size: 32px;
        block-size: 32px;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
      }
      .nav-rail-header .notif-button {
        inline-size: 32px;
        block-size: 32px;
        flex-shrink: 0;
        border-radius: 6px;
      }
      .nav-rail-header .notif-ico {
        width: 18px;
        height: 18px;
        stroke-width: 1.5;
      }
      .nav-links > a,
      .nav-parent-row > a {
        min-block-size: 34px;
        font-size: var(--fs-small);
        font-weight: 500;
      }
      #profile-menu .profile-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 6px;
      }
      #profile-menu .nav-ico {
        display: block;
        flex-shrink: 0;
      }
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      gap: var(--space-sm);
      inset-block: 0;
      inset-inline: 0 auto;
      inline-size: var(--rail-width, 224px);
      padding: var(--space-md) var(--space-sm);
      overflow-y: auto;

      .nav-brand {
        margin-inline-end: auto;
        gap: 10px;
        padding-inline: var(--space-xs);
      }

      .nav-links {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--space-3xs);

        a {
          display: flex;
          align-items: center;
          gap: var(--space-sm);
          padding: var(--space-xs) var(--space-sm);
          border-radius: var(--wire-radius);
          transition:
            background 0.2s,
            color 0.2s;

          &::after {
            display: none;
          }
        }

        .nav-ico {
          display: inline-block;
          flex-shrink: 0;
        }

        .nav-parent-row {
          display: flex;
          align-items: center;
          gap: var(--space-3xs);

          a {
            flex: 1;
            min-inline-size: 0;
          }
        }

        .nav-subnav-toggle {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: none;
          inline-size: 1.5rem;
          block-size: 1.5rem;
          padding: 0;

          border: none;
          border-radius: var(--wire-radius);
          cursor: pointer;

          &[hidden] {
            display: none;
          }

          .nav-chevron {
            transition: transform 0.2s ease-out;
          }

          &[aria-expanded='true'] .nav-chevron {
            transform: rotate(180deg);
          }
        }

        .nav-sublist {
          display: flex;
          flex-direction: column;

          gap: 1px;
          margin: 0;
          padding: 0;
          padding-inline-start: calc(var(--space-sm) + 1rem);
          list-style: none;

          &[hidden] {
            display: none;
          }

          a {
            display: block;
            padding: var(--space-3xs) var(--space-sm);
            font-size: 0.82rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .nav-actions {
        flex-direction: column;
        align-items: stretch;
        margin-block-start: auto;
        padding-block-start: var(--space-sm);
        gap: var(--space-sm);
      }

      .nav-actions > .profile-button {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          'avatar name chevron'
          'avatar role chevron';
        column-gap: var(--space-sm);
        align-items: center;
        text-align: start;

        .profile-avatar {
          grid-area: avatar;
        }

        .profile-name {
          grid-area: name;

          min-inline-size: 0;
          max-inline-size: none;
        }

        .profile-role {
          grid-area: role;
          display: block;
          font-size: var(--fs-xsmall);
          line-height: 1.3;
        }

        .profile-chevron {
          grid-area: chevron;
        }
      }

      .nav-section-label {
        display: block;
        margin-block-start: var(--space-md);
        padding: 0 var(--space-sm) var(--space-3xs);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        letter-spacing: normal;
        text-transform: none;
      }

      .nav-workspace {
        margin-block-start: var(--space-sm);

        .profile-button {
          inline-size: 100%;
          justify-content: space-between;
          padding: var(--space-xs) var(--space-sm);
          border: 1px solid;
          border-radius: var(--wire-radius);
        }
      }

      #profile-menu {
        inset-block-start: auto;
        max-block-size: calc(100dvh - 90px);
        overflow-y: auto;
        inset-block-end: anchor(top);
        inset-inline-end: auto;
        inset-inline-start: anchor(left);
        margin-block-start: 0;
        margin-block-end: var(--space-sm);
        transform-origin: bottom left;
        min-inline-size: 0;
        inline-size: 224px;
        padding: var(--space-sm);

        .profile-menu-header {
          padding: var(--space-xs) var(--space-sm) var(--space-sm);
        }

        .profile-menu-email {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .profile-menu-item {
          padding: var(--space-xs) var(--space-sm);
          margin-block-start: var(--space-3xs);
          font-size: var(--fs-small);
        }
      }

      #ws-menu {
        inset-block-start: anchor(bottom);
        inset-block-end: auto;
        inset-inline-end: auto;
        inset-inline-start: anchor(left);
        margin-block-start: var(--space-2xs);
        transform-origin: top left;
        min-inline-size: 0;
        inline-size: 224px;

        .profile-menu-item {
          padding: var(--space-xs) var(--space-sm);
          font-size: var(--fs-small);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .nav-rail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
      }

      .notif-menu {
        inset-block-start: anchor(bottom);
        inset-inline-end: auto;
        inset-inline-start: anchor(left);
        transform-origin: top left;
      }
    }

    html[data-rail-collapsed='true'] body[data-authed='1']:has(#main-content > .page) {
      --rail-width: 64px;
      nav.navbar {
        .nav-rail-header {
          margin-block-start: 0;
          padding: 0;
          flex-direction: column;
          gap: 8px;
        }
        .rail-toggle {
          order: -1;
          align-self: center;
        }
        .nav-brand {
          display: block;
          position: relative;
          order: -2;
          flex: none;
          inline-size: 36px;
          block-size: 36px;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
        .nav-brand .nav-logo {
          inline-size: 100%;
          block-size: 100%;
        }
        .nav-brand-text {
          display: none;
        }
        .nav-links a {
          justify-content: center;
          font-size: 0;
          min-block-size: 38px;
          padding: 10px;
        }
        .nav-links .nav-ico {
          inline-size: 18px;
          block-size: 18px;
        }
        .nav-section-label,
        .nav-sublist,
        .nav-subnav-toggle {
          display: none;
        }
        .nav-workspace .profile-button {
          justify-content: center;
          inline-size: 38px;
          block-size: 38px;
          margin-inline: auto;
          padding: 0;
          border-width: 0;
          &::before {
            content: '';
            inline-size: 18px;
            block-size: 18px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E")
              center / contain no-repeat;
          }
        }
        #ws-current-name {
          display: none;
        }
        .nav-actions > .profile-button {
          display: flex;
          justify-content: center;
          padding-inline: 0;
        }
        .nav-label,
        .nav-actions > .profile-button .profile-name,
        .nav-actions > .profile-button .profile-role,
        .nav-actions > .profile-button .profile-chevron {
          display: none;
        }
        .nav-workspace .profile-chevron {
          display: none;
        }
      }
    }

    body[data-authed='1']:has(#main-content > .page) #main-content {
      margin-inline-start: var(--rail-width, 224px);
      padding-block-start: var(--space-lg);
    }
  }
}

@layer theme {
  @container root (inline-size > 600px) {
    body[data-authed='1']:has(#main-content > .page) nav.navbar {
      .rail-toggle,
      .nav-rail-header .notif-button {
        color: var(--text-secondary);
        background: transparent;
      }
      .rail-toggle:hover,
      .nav-rail-header .notif-button:hover {
        color: var(--text-primary);
        background: oklch(from var(--glass-tint) l c h / 0.06);
      }
      .rail-toggle:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
      }
      #profile-menu .profile-menu-item:hover,
      #profile-menu a[aria-current='page'] {
        background: oklch(from var(--accent-primary) l c h / 0.08);
      }
      border-block-end: none;
      border-inline-end: 1px solid light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.07));

      &.scrolled {
        border-block-end-color: transparent;
        box-shadow: none;
      }

      .nav-links a {
        &:hover {
          background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
        }

        &[aria-current='page'] {
          background: light-dark(
            oklch(from var(--accent-primary) l c h / 0.1),
            oklch(from var(--accent-primary) l c h / 0.16)
          );
          color: var(--text-primary);

          box-shadow: none;
        }
      }

      .nav-section-label {
        color: var(--text-secondary);
      }

      html[data-rail-collapsed='true'] & .nav-workspace .profile-button {
        color: var(--text-secondary);
        background: transparent;
        &::before {
          background: currentColor;
        }
        &:hover {
          background: oklch(from var(--glass-tint) l c h / 0.06);
        }
      }
      .nav-links .nav-ico {
        color: var(--text-secondary);
      }

      .nav-links a[aria-current='page'] .nav-ico {
        color: var(--accent-primary);
      }

      .nav-subnav-toggle {
        color: var(--text-secondary);
        background: none;

        &:hover {
          color: var(--text-primary);
          background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
        }
      }

      .nav-sublist .nav-sublist-more {
        color: var(--accent-primary);
      }

      .nav-actions > .profile-button .profile-role {
        color: var(--text-secondary);
      }

      .nav-actions > .theme-toggle-btn {
        display: none;
      }

      .nav-workspace .profile-button {
        border-color: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.12));
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
      }

      .nav-actions {
        border-block-start: none;
      }
    }
  }
}