/* Compact icon-only sidebar rail for the patient and doctor workspaces: icons only, no
   labels, with a fixed consistent gap between every icon regardless of which nav group
   it belongs to (main nav, help nav, account nav). */

.app.icon-sidebar[data-role="patient"]:not(.auth-screen):not(.guest-screen) .sidebar,
.app.icon-sidebar[data-role="doctor"]:not(.auth-screen):not(.guest-screen) .sidebar{
  width:76px;
  padding:20px 10px;
  align-items:center;
  gap:0;
  overflow:visible;
  border-right:none;
}
.app.icon-sidebar[data-role="patient"] .shell,
.app.icon-sidebar[data-role="doctor"] .shell{margin-left:76px}

.app.icon-sidebar[data-role="patient"] .sidebar .side-title,
.app.icon-sidebar[data-role="doctor"] .sidebar .side-title,
.app.icon-sidebar[data-role="patient"] .sidebar .nav-group-title,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav-group-title,
.app.icon-sidebar[data-role="patient"] .sidebar .side-bottom,
.app.icon-sidebar[data-role="doctor"] .sidebar .side-bottom{
  display:none;
}

.app.icon-sidebar[data-role="patient"] .sidebar .nav,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav{
  display:flex;
  flex-direction:column;
  width:100%;
}
.app.icon-sidebar[data-role="patient"] .sidebar .nav-group,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.app.icon-sidebar[data-role="patient"] .sidebar .nav + .nav{
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.1);
}
.app.icon-sidebar[data-role="doctor"] .sidebar .nav + .nav{
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12);
}
.app.icon-sidebar[data-role="patient"] .sidebar .nav button,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav button{
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  justify-content:center;
  border-radius:10px;
  flex:0 0 auto;
}

/* Label becomes a hover/focus tooltip instead of inline text. */
.app.icon-sidebar[data-role="patient"] .sidebar .nav-label,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav-label{
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  margin-left:12px;
  background:var(--nhs-dark-blue);
  color:#fff;
  padding:6px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  z-index:50;
}
.app.icon-sidebar[data-role="patient"] .sidebar .nav button:hover .nav-label,
.app.icon-sidebar[data-role="patient"] .sidebar .nav button:focus-visible .nav-label,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav button:hover .nav-label,
.app.icon-sidebar[data-role="doctor"] .sidebar .nav button:focus-visible .nav-label{
  opacity:1;
  visibility:visible;
}

@media(max-width:780px){
  .app.icon-sidebar[data-role="patient"] .shell,
  .app.icon-sidebar[data-role="doctor"] .shell{margin-left:0}
}

/* Blue active/hover state instead of the prototype's green, with a clear highlighted pill. */
.app[data-role="patient"] .sidebar .nav button.active,
.app[data-role="doctor"] .sidebar .nav button.active{
  background:var(--nhs-blue-tint);
  color:var(--nhs-dark-blue);
  box-shadow:0 0 0 1px rgba(0,94,184,.35),0 2px 8px rgba(0,30,90,.3);
}
@media (hover:hover) and (pointer:fine){
  .app[data-role="patient"] .sidebar .nav button:hover,
  .app[data-role="doctor"] .sidebar .nav button:hover{
    background:var(--nhs-blue-tint);
    color:var(--nhs-dark-blue);
  }
}