/* Ayukki v27 — Move the existing logout button to the bottom of the v26 sidebar.
   Frontend styling only. The original #logout-button ID remains for app.js. */
.app>aside .ay-logout-slot{
  width:100%; flex:0 0 auto; margin-top:auto; padding:12px 0 0;
  border-top:1px solid #edf0f3; display:flex; justify-content:center;
}
.app>aside .ay-sidebar-logout{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:48px; min-width:48px; height:46px; min-height:46px;
  padding:0!important; margin:0; border:1px solid #f0dcd9!important;
  border-radius:12px!important; background:#fff5f3!important;
  color:#810D0D!important; box-shadow:none!important;
  cursor:pointer; font:600 12px/1.3 Poppins,system-ui,sans-serif;
  transition:background .2s ease,border-color .2s ease,transform .2s ease!important;
}
.app>aside .ay-sidebar-logout:hover{background:#ffeae6!important;border-color:#dfbbb5!important;transform:translateY(-1px)}
.app>aside .ay-sidebar-logout:focus-visible{outline:3px solid rgba(129,13,13,.35);outline-offset:3px}
.app>aside .ay-logout-icon{width:20px;height:20px;flex:0 0 20px;display:block}
.app>aside .ay-logout-label{display:none}
.app>aside .menus{min-height:0}
/* When the narrow sidebar is collapsed, preserve accessible hover/focus labels. */
@media(min-width:861px){
 .app>aside .ay-logout-slot{position:relative}
 .app>aside .ay-sidebar-logout:after{
  content:"Logout";position:absolute;left:calc(100% + 15px);bottom:8px;
  padding:9px 13px;border-radius:9px;background:#25292f;color:#fff;
  font-size:11px;font-weight:500;white-space:nowrap;
  box-shadow:0 8px 22px rgba(18,25,32,.12);
  opacity:0;visibility:hidden;transform:translateX(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  pointer-events:none;z-index:70;
 }
 .app>aside .ay-sidebar-logout:hover:after,.app>aside .ay-sidebar-logout:focus-visible:after{
  opacity:1;visibility:visible;transform:translateX(0);
 }
}
/* On phones/tablets: show logout beneath the expanded drawer, never beside the clock. */
@media(max-width:860px){
 .app>aside .ay-logout-slot{display:none!important;order:10;flex:0 0 100%!important;width:100%!important;
  margin:0!important;padding:11px 0 max(7px,env(safe-area-inset-bottom))!important;
  border-top:1px solid #edf0f3}
 .app>aside.is-mobile-open .ay-logout-slot{display:flex!important;justify-content:stretch!important}
 .app>aside .ay-sidebar-logout{width:100%!important;min-height:46px!important;height:46px!important;
  justify-content:center!important;border-radius:12px!important;}
 .app>aside .ay-logout-label{display:inline!important;font-size:12px;font-weight:600}
 .app>aside .menus{max-height:min(56dvh,420px)!important}
}
@media(prefers-reduced-motion:reduce){.app>aside .ay-sidebar-logout{transition:none!important}}